{"_id":"@material/mwc-ripple","_rev":"735-50720c4c74be5d253234229d7921d16a","name":"@material/mwc-ripple","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-ripple","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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","@material/ripple":"^0.35.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.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-ripple@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-llkxCpJTIjY4hc9/Zjtka3Y3qzsOtfwQ2FrPTpCP//pFJhS/z0dlH6GyrgMDLFsFBbHWL4hZfGHPB3i7UoNH5Q==","shasum":"f17da02a6a5625cb4cf2e0c5a6e1ec9681b51e05","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.1.0.tgz","fileCount":5,"unpackedSize":13679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmOCRA9TVsSAnZWagAAfLEP/jZ6eUyqdS0b9umSQ0QK\nlKYUg1t4bFve1u7rhM2Uo8KWhGeQCquYlefYV0gg+fnk2bnuKoP4TvLxCD7Y\nWiMNanlb2bCNcTPIz5sYsBEV5fdJZ69O45uqdBvHPy0VTpZTQbgFZO58RnGY\nqTUmK1LVROhbIb0F8kcWDM8wsQ6fyyu4q7rO8dKwGwG1X6uvxsINybS0tTNF\nha3UJ/hYjt2+YfNHmAQTG23U65tFOJ7oIXSDZkT1MKV+Ia4rXXqE7lV9YWhs\n76fj17LuGSN7FgJBGcq/Qkb4st47qJS3tM/GofRZh1S7mpDW3w2EjgGaoplS\nXrZzD2V2AusYuXwN+CzPBS4CdqGt3PKzXMVTMBGWjMIAZDsBeCN+S4Pdv8rT\nMazcYgvpOB3i1uPYIbWjQWm2jzqX209DkVMe0KreGvxFXGHDcUXQBLBQKR8t\nMDkd8/01BMWbmAJ+3HlEOWjEqoPvWuoGnSdQcBKmSwNTZzBz6ZC3xUqINudI\n6rnpcUOW8CiOrkFuMNdRQn6Dk4/QOmknAly68aEBxW9SapCSz6MkpQVJKQxQ\nBA4YT61ZHX/1LsFPrKejFFtg5PUGah1tN2xjJJ5P1MFdoftjncH2LMpUG/CQ\nE99Nj33e65BPcrROmTNc4/xx1u0xULSZUnURXyb9VP7LzmXvb1zsQtpV2mRz\nEiMa\r\n=xPGh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwAoDKKSfpQ5VZzP5nybUQ3jNxyPV1DsPiBG59wgnrZAIhAL0c654pR+u/4Hng8rjB30IRUunY0qlpDB5AMGG9dMzk"}]},"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-ripple_0.1.0_1525737869247_0.9971658169896849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-ripple","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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","@material/ripple":"^0.35.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.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-ripple@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-AnpUSxPFVjT0o5lL6/sqrv8P8+rwehMWl+2u1cRVa9T927U15cqv1TEIfr5q4uthnLDo1xel4aOhgfqmIOwfoQ==","shasum":"33b9109afa45ac3f679e6ce07421449d5fdbb255","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.1.1.tgz","fileCount":5,"unpackedSize":13686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82J9CRA9TVsSAnZWagAA/VkP/0i+9GWgRjBt33M5gzGA\nUuyC5cwZS/snT066DRhq0chtsksVhpO8rYVF2YWKKnSlSNRBkjC6w6wgZUkf\nd6W5jai4cEG1cAhCgOm8Dc5ga/qQZKQTUiHtgQ7+KTi5TZzzzUE6Nph3bxuW\nHp3XsfBw6ZhNQyj0CrerqV/nSsPc9eeIFIK0M1FjVu9p8Dy/Q9+Asr6GICmj\ndezuKtFGWs80WwSfkEqjQDnaO8VmOJxN9hEPHlY0zCO4zo9O0ZUo+Y8M0+dT\newdtAKgE8ADCOohBbmur+WtcoZvQ0qwCNlqgXK+lEnSpkzWJf8eauZoXX6OY\nwk3O8NZwht752FZW7t24wbIaBIie3XhsmnXCuxHyIuHCFpL1DuMwGMEMaj4z\nhFrfe+STvRYSU7V7NCqQRt7Bkd93nYJABMKti0U6KWgayvfsJjfjIQAh9oP6\nkVrTOGiiCq4HbnukPdSLsKR95Ulqkt0CUtu3t214lJiXV6Y3aDaE4jEse+cg\n/vjM8vq3xTN8hFKcaP7kUzZFa+ARD/dMW0VADXofOeXarT/FGrDG7cZXB7Jq\nsSp3EB/vuT2t2C4pYOZtnIIxV9NNA4BIy32fodfdTIPzx2bKmNMGNWP6NL/g\nzCT0syq/tsXfGx/xqj6rRE/zeN+kBS39z4bcGFit1Bidv07HztmB9KeDkEpk\nSVnQ\r\n=jjcv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWWLAfdl0XQoDExLgTiq/Y3WZC7SP5DuxzZW3dbB2S0QIgQ3s2Jvlc1uxRZ38hIbVqbF3kCmQQdxE/KdG5hhQgwaY="}]},"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-ripple_0.1.1_1525899900497_0.8020500819148162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-ripple","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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","@material/ripple":"^0.35.0","@polymer/lit-element":"^0.5.2"},"devDependencies":{"@material/mwc-sass-render":"^0.1.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-ripple@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ue+bV3pQ13qAV/xS1bHsAluHBpuBf/xMmUHzbYser7bScKcyv7jRniKNfZfQQ9q967tmjCiEnqt/JPySza7HUw==","shasum":"268d6c1dddc6d153d86bcefe607f4231b52f43d6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.1.2.tgz","fileCount":5,"unpackedSize":13686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFdCRA9TVsSAnZWagAA+6cP/ipkiByBe4spiqwIxh5f\nCNdQeXs/FKQa6w2Qahc429qZkJi2eIJzoXVbZ6llZPxqhNEB6r0g1YGTZn+t\n9E4n1sNjGJrpPQonmzx1GLy+u+BZjPISXEfyqU0uquu213fGVyb4AmdNqYoy\ne/zmAtWDz4Cg1nrgJpMDvG7INq7cWUvl6KZTKWBXIGo3yE5iKA1kb96Ml8La\nMCREd1cj2Ecb+tBDIrr069Wi3/NVimk18VKA+FCh9m9ULNrM5vAsSchV6CTZ\n2dfz0d0vhkdeYIgki/avHZYF8G51iP4KMCNP6O0Dly8PWdl+vA7nDKNRlaJT\n8EajcNKQ12bgiaKZg4UtLVCNdYvwwrgfenrqWc5l2g+FTxuigZpa035ZBcfX\n+YJuhC9HHjur3aRMOKI8ENkVCfFJYN5OU51nehMfaMPzOvWoxl1RS8czZAWd\nLo42zzCBLfCCaC68npXT5W4trbgj7lGwR8sMBKZv6PwQM7/TiLLSNer4oNho\nnu4s7XmrRXJFxkfjW1K8+CQYydI9QRuHyIGdGryw33UB1muAcetFm32CnhB4\nZSqxK9xozdZ/Y3noQlvXzXXPTX3jlM2oay4JdR73q3SSFa1AuBDzqRgxOpR9\nbxtXCzQz6qrtGT6KRY4DAwH/9Vdunp7CrTiheyS2IxYGuR24br7B5GufQ1z1\nZR/O\r\n=S3Fi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMcM0mL/ktCHsMt6ZI2CFpFIMfoojFx8FnAbxc7sidXAiBHIob42X7j/bW8oMY7mjR0q1PiTmV2Okl2cy1LYsnBvg=="}]},"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-ripple_0.1.2_1529016669302_0.17833102129612377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-ripple","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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","@material/ripple":"^0.35.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.1.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-ripple@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-LUyWENIGGcE5gUAjlSjogoNHUuFy7XgVINARoOLtbmLVbU98Rz1YfahaRPLKIGYxvcvZYweNUIfSRBTLNHMdJQ==","shasum":"8b99a9c71c181fa3917de840ba04e74e1d87e76b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.2.0.tgz","fileCount":13,"unpackedSize":40637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKZCRA9TVsSAnZWagAAM+sP/1kyMY5DwZy5fzk7UQea\nt0JMY+lGc6cE36KL0herALslC7d7dkAobQkwldiX3nAXj7zYpL+PmtKV6kU0\noGGd67jYUtgfmgluH1ileQCYqrbL1P7gNM9yuAsGp4Q5v9+NM0W+VN4PVRQ5\n26p7X8jMCkmsdCxuBtnpRHUoWerunHrCUlEaPpM8OIT1D63/D2KFJqAoJkdj\nMw3ThMH5XxySJlLOn7vIOnzV7swxyFyDsQhLPYDRSLPJJIjpQFqGCMC+ORyR\n8hbqfLf75Wjq8iHm/Ve/FIoZAS1tIAm10O68oWLxht2HNom2DXqEcjXfeyX5\nmMJXBASVc7XSlsB2h4JOSyWFjyCBY92NyLvUh3dpAMuC6H8R2GgpGa2L4age\n4vj+I6oSezWq9rMThK4aRFoxPrjF7JdGNLcmLuxL7Esm2BG81DjYJS6A8mor\nPe+CAZMyVcrI2jp8S0ekWY4FFEucp1kpuwtXb0+Uxld9jCp36dMlwFi1aIy5\nEkKDzNmYjkb5OaG+OvUDLfQxQBagGahIm1vFbVxBb2phk5A1qyuOW20XBu9D\n01IjJUUOZrxGGDDcMBGDi1r/OtNh6+1E91a3hR+7HAPowUt0mY+ppc5GBPSc\nl8VkfdBHE2VfJ+IXR6JVc715LPKIf2GFfLAuQPrzhupIG8d7aeKFy91ks6eg\ngc3F\r\n=6ANb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrt64SqZxLN4UobPRCTRUasWNH6GTKd8dAvrJA8scL0QIgSST0HgrdUeAMZgeenmKXm5MrMv7K4vK6frV1U58QdFk="}]},"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-ripple_0.2.0_1536885400262_0.47016653013604137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-ripple","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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","@material/ripple":"^0.35.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.2.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-ripple@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-d7jZ9w0j+74ApnABKQ50Q4T6JcyzyAdd4AyCGiQY51x5Q12DN5TN7SMoW0yqi5wQdxGyMEy8S5Suq7b4+Ysy+A==","shasum":"3b242e8eaf7f3f8e9abb927bd7ba51846aa05eeb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.2.1.tgz","fileCount":5,"unpackedSize":13741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQqCRA9TVsSAnZWagAAgmEP/24zFdl0e/6APYhnneD1\nqsdzh9yOFOhsVLN5rX/ru8h3mCa23Dn1WuPikoAbAy0Cr/BICUtIG4mzdLVd\n43P2QPpxN9Pn0/Cx/zdI1cQjKBrU6CpnK4fpOmiYM9+M7V5QcwsNXpXJm1m3\nHtLLEHurimfOXs7rFtte0EYeYMgOA0CV9YmMHO9yVm2Jlvp3lFBwZPSLgeKT\nTgUiV3Q0+ketFNAD8/tiWbefQ2JWNN1MJtJAY5wgYp2nhDrX6KgZEA8DV4mR\npn3+/btseNQVZFpt8FpsrxHL7/iqeCTpVLRWekWeh+dakz4if6ABTInpuX0i\n1qNCTZXRsQa4DN5TkmzQHSfeq7uOkwfx5yYqkF33px+LjQ+eqB7ztaLB2Cqc\nlZU9131m6B+8NmGamh7pKUkvG46qEO368mt5uZXEnDiysGStd8Zsbxwttt06\nVLPJVNhq7wD5eKjIqe2gDNVW1iLRyLKnWCJJQm2mD4UioWy/dNVFkyf5KIqv\n/lhjG44CE8EX8ECgYYuPoLDwgBQXBloSIZNRzZ8JubE3+PvpQTDFIvV5OCDa\nuZkQ1+nkjcrTAkOgRTMl1eLIb9vdHioupUYPuONK/RBYpwhPhyvDMGOy5b0R\neuyo6y4osqHoxE+KeVag6eruwrCiJUcTuokYt2kcQj/XkQZ/dkjEkTZDXA9q\nFHIa\r\n=TR1T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuX6LYEslxBODHyyDJKKziXCGN5FTzOImQSvV04x1soAiEAmsci3zLCxZKgQQmlF+sGWNn49n8yApwIAs8ZZmf65x0="}]},"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-ripple_0.2.1_1537578025791_0.5221980462149172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-ripple","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.0","@material/ripple":"^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-ripple@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-UEfrCl6s+mgkxQXtQJ1kcSyy4+kU8+3BHsEwHWHzK7FVorN3s74vSNs/BUaLhxFlA4pOqhnFA4DvgeKGwzOwug==","shasum":"787d92d2fffedc428a4b19b21a10abdb3d49d50c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.0.tgz","fileCount":21,"unpackedSize":60063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGACRA9TVsSAnZWagAAtKYQAJRhzNUAFugnIORZ1Ivg\nuuR0W8BGuqGD9HFBA1GnGT3lulGP2zs3Z2zsRt2CN0N1d4PBCxskamzV10SX\n4+ZM1RtsCmtsk8lWSecDBSHyP8JxVVYttjKczYuU4dYuYPWVpAODM4wbL7Bu\ndPEO81o4JW1Nzlsvg2b0mMJpBLsaFvfOKGY+Mytw1d8wFnblANtzp/sQEQjq\nhOpLxQ/ukcaY7RiYc5xDWzZHF9dP6mBjFyXTefKtmmd6bH+6qEaoITAGDoP9\nRS4DQA4kOtJS0+XMSv+273UNk7VVnhauAvObUHZbHqK/b+hU2e3Et4LN0K3o\n/DxsCSjwJ1USg2kh27wYyfzVxVMFQGQ4i82zZ4cqBUFcirVLT81J3mnE9b1i\n8y0e4yr2FIwdKC8I9Ubnpp92ZyEezGfnQpn3rYfpaZ+1+8ysawP0Y/CEs5GN\nWNxhXGMkUCJgjCD7q6ZMVWxlWracsl55D/a1CAGWLLFmpfOH3FDwK0kD2mop\n3XiZ6XgO9O5TWMXatRHItSe9bXwJtKmcEsL6aIXqAnxlNjfblkmIJlQ4OmKb\nPM4OEBbPkSJNFjOTqY2tKGfebQ5Lbyn9QmEqk7rYMxn9K1CpQHldNuwrKBs2\nNWRmDudDuI8M0Sdr1Vw4yDIBPNku2BCm8d5ZXLZwQolF76B2V1XK/6PLA7U4\nQcdn\r\n=Ob+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxxOTo3lO4MKpJemG5rhUpRPVonUw8oTvyv95fvVvzaAiEAum24F7PGfXU22GTq5psSUzAmZOrG4XB5SdJUhkRlBT4="}]},"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-ripple_0.3.0_1538695551597_0.2214979672757187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-ripple","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.1","@material/ripple":"^0.40.0","@polymer/lit-element":"^0.6.2","lit-html":"^0.12.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-ripple@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-pOdBkP6NJyGz9UftvKjrx8sXvz+yIXMC8q6Qx/LgGw67tgU4qM/1Hy22iePiw1UFNhlqD8ZwtdPLXKVaisGauQ==","shasum":"da812516d0bd0b15b0c4793b783fbdb9e04cd7a0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.1.tgz","fileCount":21,"unpackedSize":60171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64ECRA9TVsSAnZWagAAfPcP/0ckZKVkxmJcW8hfuoiZ\nPFGnCSzwjizOpC5OBavlg/kxL/W4A2TTJ8qYhTqVqdiLkQG0X7Ygqu/codMC\nmtlmGwLjzdqbMxpd5/2CVKTCqWTdv866S7K7efx8BTEKagHMdTLBoKy4IzmR\nTxfc99lF2wQ+KZiVay+np12c3waqm+70ccicR+K7Yw7vpLF5bmqZZowGVaaj\nQJT/OhSTOrAZdfh7pOW9yFOcW2olGXLEGg/aeVmTMgVmop+qkJT4YXuyETkx\nL3C3Xw3dWLUOlBndp65zOSXgYPkCzDDCl/x07ghj4fzrgi1qkmnH5yXpjmTq\nAvFi1Su8jbFnV/iPPDix8LErTkUWP8pXizmxglQ4WXfWusgQ6p14epqedLq7\nA1Jt6lRgGhXp+nrQaKbjF0ay+/3Tu9YTjHtZiPR7Y2o2NR6YtAxIn+5VkZEP\nyx2kViVnfS/2iEJFsAqJPbhtG7QVstvX8ydIwOSiauK+aivADeHY3W+BjeDg\nFFRCSUwlyXwbt3Qm++rub25DJjyrGljUa5TTbdMpkRfYVUUQRkgPoqfLqCTi\nylgbY3daq1nZrbxfpYvRWx7ZPzQwN8nk3tFa5oVhVBK1zrBk/D6D1/35BGip\nq+ESBl5E9zvh67pNBSgJGR7Ju9QPP9n5oJe+YVHx9wXpMHsdJZuKC81nt6Pt\nnhrb\r\n=cwrT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Exo1q5vVTiBjb7ogDPzu5n2ubcmhC+f/IjkBlRol3wIhANti0gRlQjhDfQT1sP52c1ulyf1o0pHWans1EXXKO7yS"}]},"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-ripple_0.3.1_1539026436006_0.14968345759154889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-ripple","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.2","@material/ripple":"^0.40.0","@polymer/lit-element":"^0.6.2","lit-html":"^0.13.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-ripple@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-NFotUuCGec8TSB2n3xNL5HfE2d7+iUoq8EetbhNzOf7x7cWwDxKeRHvapWqWuoHvpUWK8ineALAO0nM2DIVtvA==","shasum":"b97f80c7a8d6f312d29bd3a0692d78ab31f2e5ed","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.2.tgz","fileCount":21,"unpackedSize":60258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eECRA9TVsSAnZWagAAgtoQAIPfFbnqy4twuTzpOlh9\nOhj1QVZ0miEG/OtxOSSqq0LYc9/zIBpbT5uW5gO+yPHSZscibo7zoumtp+wg\nfAM0oLyQMmFH1YiM3hg9bKsqsI38JQlkh/uElnekWt6j5rv2Ojm0m9MgktPw\nMDk6dWIAjdgTSqTHB5Kwv2mbWTrzaVO5r2sBALxhcrhi7etLtSLD8uEjMIJr\nWV2gg0PFQWTDKSv1LXhP0w1n5JMi8quMjEyJrZ8fSkddfieJ7pITuw2EjNF2\nVyms0uiCM2NyAv5yrDNeSKmgxresedTVybCkRosMhLO3vdwWWm+/PUjDl9V+\nZYl9Zb7mv1xOcys0WxHSnn5wJWu7zuUb6KpiTSoGLxXRwtcodPgUfqQEnMOw\nAS2duuNql6VadZO6SndoWsdqP4k8qUU61ODotbQfIeaPWYoHbKtzWIMX6m/I\nqS9FOduBFfsHDoZHXSzGHWzMjjOSBlb/wHRmFsf5gKabXq+UzN7q3Rdzl333\nXyTH641GYEOeyiBjU816eU7hTdUj6ARPBs7M1tj2M9Zz+uqoYFTb3LL8UKo1\n0M6JGbDRWIgqaDq0+0DKNJ1vsw1GoWVMpyk0+8btLoA4PcUXz5cMZk2b9WFC\nQblRxx2W873AcMGmssIasyie8IcIfhxjWMxoUBeHhqVg1F5249pwhAHMKd/e\nDwKi\r\n=3cry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhdYuzb1USu+DyEgFiqr7C/SEk/YnOwPfh6IQDaewiRAiEA/RQKQTgdsoB7KRB0ioJf+oLeoiUwhPs02kEweclv5xA="}]},"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-ripple_0.3.2_1542420355863_0.7317852113675856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-ripple","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.3","@material/ripple":"^0.40.0","@polymer/lit-element":"^0.6.4","lit-html":"^0.14.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-ripple@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-Tkk9qhis+/w8oMFASVMUE/FO4sTDgn6xHKODNNzp9eSzzbVqWDe77Ig91daMSfAEj+eRFeH5FHGkVf5KCWmIJw==","shasum":"dc6820f2e11457c90f563afc19f9804eac06e1e3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.3.tgz","fileCount":21,"unpackedSize":60258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEYCRA9TVsSAnZWagAAP8AP/3/u8jtNGF6RHE2NXkwR\nlSUjhebNDCXgyjYFJC/GSn2ELR5z6NraGxvx0eOyAEHlU1jdtbhPh4Ep0ee+\nWk0aBIcouH7T5Cxfc47QElo/EphSxQRTATOlZmN8Ag2w9ELgyEmJ+GpNaSaC\nlpinbaPXDw5BdRhUaT0LSAKZot/srgnPKphj9PYuO8QeqWTr6+yN5Pal38YQ\nNaXv7ZkxxTH4VBLkIBrPMqJPMw6KTm+TCUFvFeP4IqQDRXi28Z+S2Bi4gN+V\n0nK26Gi7Fza77uuMXBQU5o+P2qAvAYMuo8vqvFKXD55ZwYCFf1su2FCFSlnf\n7zteydj832Yy4jh9+0/daGoywqNetfO4++ON0E6pBOQwPpl5hLjfi3MFEBRP\nFHYlW46sn5sfUuDHFe4Di8ODk955gNMpcBf1HgUHTzx61KsuGiv0//R2dDHX\nCAT86uUzi319McQf+tkPdDCFDSqUCrwkc4Ek+vFi0rfVjIu5refSLPeDQvKo\ntzH1Bqr386YjdIqCIYBUw25dgzeDuKizn40aheqKAepUIhhtdqIDpSgR7lTz\nFoSwJPCEOn3o5I2y64WZH1lox6JFu7Pic/fCC+tS9cCMs1HTKv1yEHNnNL0f\nNoiNlhKKIHYc84eGnC4ZUvuQt7W4tl7r9fQcbnvoQf25c35JBWtPFoBUb5NR\nz+KJ\r\n=flK0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEFnFBK9Hn9rDLQAlVelw349okMVOfqQ6Mu3yiDbRz6AiEA90yCv9zvHMpE9hbP5S49ShPaKmgp9eS2MXFM/cM3fIA="}]},"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-ripple_0.3.3_1543885079700_0.9534443118248848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-ripple","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.4","@material/ripple":"^0.40.0","@polymer/lit-element":"^0.6.5","lit-html":"^1.0.0-rc.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-ripple@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-aF3vFKn6taYe90geHnoDkr/dPMaVk9hN1fGZjuFYUsQwLUVCkFNo8jMZ88z02g6isXCebTNc2tJHTutmNGeU9w==","shasum":"630d3796404f1f1111ce513e3aa0e888ea79a2b7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.4.tgz","fileCount":21,"unpackedSize":60157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsNyCRA9TVsSAnZWagAAtBUP/2XIr8qBC3k9K7Ba6lKg\n+CdFHqVpO1eJZPqtak9+V0KDzgK2ZL/+z+AROw8GrEnIowMBAYLP4V6Szd0g\nFZme6MQswoCcEE7ayAMF8Cwtpjc073yzzJlXAWn/jlmIfTeWRApzjDbgZUlS\n+lSa5cu+HEEIrvvoEyldvsQWS5aI6+WgAqnHw6wKA38+XdAQMD0VVVAMj5Hu\njz9xYo8nSEqo75nrLhSW8TlYn0hNPbZMnC1aGqOSpphWadSgc6wM4eSvcCA/\nE2lig+ieokMGHkbLTM4YxERbtRHTolaQjDPvkct67GTsT6F4Smc5NgfMtWoG\n0tVOveyihbA3XU9ZVnBQWbwZ/7hoIhabEtPJqvGP5vH/fGDQvSVkDOtpPOTh\niFYG1IRE2/s/IajdN69EZ9z+BSYhesEKx8zuLI3nIDwUWV+1vBgXYJ9kV7RC\nOmk6hYC1QRGxFdJuH8ox9glzdl/Vu2nRN+bLOhebKfhADSn+5Ezsi7rZHNI/\nxj+NfrBBspJFhVoDGkIVW9RZFGe6hOcE9DET5FqhastDpsEqNeNgzoguvgQw\nNcStsB/gxGdTZ5WRJ7wPI6Q+4juCFTiRZgGrgZPd4S9IH499K9BjNElncTnV\ninI6zP34oKvnnfxWKjFmOaA5RiQfVaPZEjA3xSuEgUMNPtr9BTFWY4t4NL6D\ndLsY\r\n=KIit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyxjJfbZq+BZ8g1eSWfgUdLSGN3emczofEJ/7uvmSdaQIgZ00gDqLLkyBEQbUYM9Qz5yvMxAt6nSHHFlHp/2ra2K8="}]},"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-ripple_0.3.4_1544733553240_0.07913452077777072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-ripple","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.5","@material/ripple":"^0.40.0","lit-element":"^2.0.0-rc.2","lit-html":"^1.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-ripple@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-KE6KfyMbjz1yhvvQ22xh03bH+j1UqbOgOpKr0XrIuvbdUtYjf1gGf+HsonM5x4RVsxfUSPkqsyFC3q2Wu0XMsg==","shasum":"3fc97e070450d596c62dc45818e1ee577b701762","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.5.tgz","fileCount":21,"unpackedSize":60074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXICRA9TVsSAnZWagAAk24P/iGX+wF8rj0uOO9jgZ/i\n+fLtDn6S1+N2UqfTIEsX7LQ7ti7MlNKXc+xivuc5u9Xqo+78RTlxFTbJSDkc\nhYORaIsJi6YV5YjUPCBepDs6oHHa2zIk3WTz01U7j7GvEs/eR/btMORkhokv\nfFpy6r+qALkM9AH9YMQWN9/mu6eUQPI/XkBTBnGvqP64NE3U54l9AMBxRzM/\nluJMhsm9/iKG4QUW/Z+gOY34mrXkmgx+tEGF07oA2poVDEO6EVtNogL5ubQU\n7d16IGD0We1ijSRfs92qf66t/SJgXv8vz5WuuyX5HfIsSxvsoEk+BJHnYw1D\nPSIGNQfs2CKEi/0+muLtuhMoRXN6wBRQyAIObaKd0KSOVCT1iJ/DOuhbhdMk\n8WoVjQ9IFpVVxkvb6WO4fX7jdhcI/FenAlLhf0WY+Yqe9eQqRMDCzPZey+hA\npD9G1j627jl+Mlmzf27x3vnNdgznn33miOIFZFkHnQ37JDwUa+RXtmdgRYfR\nBdtzWQRmbT5Av39yNO4x3okNP0sYfkrU5ohpTgpETiOzkDsv8wos2BYYTOPe\nB9GC7EczchqeUxVNsI61+XS5uwOodNYUQYgO/5i4Ba5YFK+c7FOcrnMZhLPY\nkwf85LxSz5K/nCSGZFy9Nwbe2kND5KDSITGSqGh0j0oL7vBhQtqsy7WZFK23\ndTfX\r\n=MBeM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhiqtJd35BSbIakdirYe1e6yMbnC4buUKSgaQBLj1UfAIgC98LyW/fOQlsH4sKsi9frJ/o0YFbaCdLCWQYQLwUQE4="}]},"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-ripple_0.3.5_1547245000328_0.8755661466313804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-ripple","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.6","@material/ripple":"^0.40.0","lit-html":"^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-ripple@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-fCqIoHX5M7qW2iOitEIlJF0TBl1IhzHpXb1lroXBv1JlGGYWWSd5m+v7ZSJU3Apc8s/IkPsDDCk1vSHv6VyOwA==","shasum":"27d7748e6d1cf45e2ce299d0786440217bf0b3c9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.3.6.tgz","fileCount":21,"unpackedSize":60010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+aCRA9TVsSAnZWagAAudgP/0Suupf81mU9HAG498NC\nbBCumN+raJ6+XRx0Oc3D52Q9AadyoW4QymEU8eGx/Ebct/ij+VvYzX8U6tiD\nOXuSU7JBsiWTIfhv9FUrcj4kWD3J/tt7BpMzrGvBZn3pe5K1MH1uRlNENBdS\n5zoQ6vTH5z96EJ1V+uk4+jqIc5yv1jeFM3NFnHJb20E7bbLvxWiTpRJcGjMM\nfLF85BMI2NGXEYQ5tLkHGNb0Yv978UHCOXkU+bwXJAfY3EEBYDfDWstjQc5d\n3przf2VrlSlfxgOpuXK3vzyCL+ae7xx1x9xu/H82Lb/FdFhLub65JOcvYArC\nNQUgq3CL/VIK9li2U3fFzmu+zQf+bC7nu0ogRNeIzDJMEZRez5dUKw8pjDpP\nzAiQ3Vwr0lDSpNXZ1ssvoVF83pmTLLelAqnzeeTE4vomn1o65+ys24BAAr9L\nAJyPVUrQWzrb9BY9NvjUYsTIPpRxPR1FKFHI21PF0yR7+0NiTWx1wS8ovroT\ndwbxV8ZDC6evPP/J9p3OyQ0tSeovEyFJKXde5v6Il431m8Ctnw5Md0656ZDT\nikrmiG5uQpLXJRJx+9LJIrJ1ALa0lHGKpDmaWUjDvUii773PRWc1rAu5Z60y\nRzAcp+gkHnPTTD3Y79Gfn/jHi4Ry2tT1ZQCzFDt77rieTrdga6FX49yMATAg\nYT0z\r\n=PA7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf//hAqX0Zmy1YYXuMsod2jzC8FHR/yOmcwXseY2rN3gIgfEJoSs4m5W9f8PNHHQn69Ux6viI2qV/Vutmi+UnWsgs="}]},"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-ripple_0.3.6_1549397913375_0.07084020039315453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-ripple","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.3.6","@material/ripple":"^0.44.0","lit-html":"^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-ripple@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-KaNR4QSleKYNb97drVqM+TEmxgR7/ClJSXeK1rGcbvDAaE+3vx5wlPW1Ems23eLqSsFNntgy43wPbRkMjogIew==","shasum":"42b3b3c17e55d576deceb20e955f87e68d2615bb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.4.0.tgz","fileCount":21,"unpackedSize":60010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbRCRA9TVsSAnZWagAANfkP/j9M+1WRoPl+CEjmeGy/\ngWAQ4Wylu45r6znhyx1HrtUZAMCsyyJI2hEnTJm6XO3r1vcIskUEZWNMKhQk\ndHgJuFOxmkEhDygzluH+HjermlflX3NpXK0DxXy110hC223gDhb3vlvlAXHQ\n6O7oWybw75SXjpXVUsWkK63gb09ArnuIGp1+/G15kpNFqyvuFN6zHwBlZDYd\nfFvFOQfsuEZGOhd1r/NIMbwPGcHXo13TR5N4m+Wwgd3u712zUsCuXAg+jdoB\n7BOcRFSD+Sn4lVG8veDBmzuWPjAmc3KjSoAGENA/R9Bk00269C+t4Wrq6goe\nEX8QrrQAMk1rtQDPHRaoi5N54yPiaEEiYPdHh2B2/k1431dHIltTZL16W8JP\nsxpnrGTRNvYZxfG/f3cRUSK5AyEi1I6kx+Y5M9KDUivGbkmq+0IBq+I3uclv\ndMHu7FTB6dmVsHCk+P3q2V1r4EOF51wH87dg/5Hma8KBc5u/7sd9PPibOmUi\ngcA1NeIzpagMwU4tw9xQlRh17bstgg+FTTSsX1ltmRvxKsO26Q6gT4ALlwCg\nj/4DgEkgfJvmZxYLEpgFWr3Bj32KtRMQ/d6ia/S+bwcnuXJS9NxraHbhmZOX\na5qhU+bITfDRC8UbqNtfd8j+YHWelYc1PWBxaB+/WZYUtbxjOXcA8ApQaOVS\na6RE\r\n=g3NB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCWirCOeVOeEaD6fdDFuAQnVc2rgnHaHL7ZW42LTU05gIgS213Kcct0KZPtU3HdeVLCbKNpq1Fy9CjWKg4TinHq+0="}]},"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-ripple_0.4.0_1552348880661_0.36395384604238123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-ripple","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-ripple.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.5.0","@material/ripple":"^1.0.0","lit-html":"^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-ripple@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-vOB9ZpbBKnNsE+d4GoZIUoupk2am5kHBHqGkwSXXTt4c01SO0HRWkdNxayB2QAHgN56Xnsct0z0/pdfoZz7lKA==","shasum":"6520971df2ff067ef52121c3cc0c4d8960d61977","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.5.0.tgz","fileCount":21,"unpackedSize":59348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn1CRA9TVsSAnZWagAAV5QP/jj4O+rxAXGKfc9NnYqZ\nUNp0Tf9aTjEV1WVIY6A0wtEzMeT0PWforWYLPo3pP4zeSmFvyWvWJihRISnW\n002RAv++6jgajb3NwhjL5tv3VbUwe858ejndjSkJVKEqZwq1qbFI1rvJygKf\nJuLE00Od6UKE3dv2QvKUkpgBymmvnT/BUMZswOLKjMU97kpA0ym93IpP64KY\nI5CcMnPRErC2pTL9IQ62xndhChuqM9vMZQNcT8dS0ShM7ejrUXN9+ZjUfJXO\nbIKOHQcxH1+IJESrAEHdby9iAfgJqXgD0yXlQ2Bxwo6ADk8UWdNVVF1dpUF7\nxxb6RNDRFfeHhd+vlqnC7jrZYtRQn9ofSzGg7fJ3b3tK3xb65amwgBuIHkTe\nVktmHhw3pG6Dd769N9CXYo/BgFvIjbbdCn5/J+LXKT0atPdCGObqPLToXqnp\n9o2UwUaWGmhuxrPlVkzxf0s2MLX4I1qxX88GfqtceFv1Z+Brj+rD/uv+0iOH\nT8IR8k6BF+UUnOL1F5L2Gamu5cXG0xrqq7kco9m1S5dmF3Q+RZV9cmxmecMt\nORnNyDkyS1g2G8Hu8PP6UapYSXj+e0STkd2loaiVbCspqQ4YrDzS6avr4C9a\nwdzWlpXM0EvO757TarOi2OpSYHMlqgKqf/SzO+QwUessqPf/S3aIUqtkdTSe\nqcUs\r\n=thyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsY74JifKNc23w8TbJ7y9CqXxkn/JPClUX4iRUrp0ogAiBi4qZ17FE6l2U8qtv8BfmzY5/ji1mOR9qAHfWJt6UdbQ=="}]},"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-ripple_0.5.0_1553639924985_0.703074353102946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-ripple","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-ripple.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.6.0","@material/ripple":"^1.0.0","lit-html":"^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-ripple@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-K0b3VtKTlUd2RLaSJd6y9lBX47A84QjsK4eMn3PhDlWG7CkfhRf5XBZrOf/wzrqNf2/0w5of+8rFkohTraLHiw==","shasum":"602eb1855acd7e02d79398290ff223f9335976e3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.6.0.tgz","fileCount":24,"unpackedSize":296496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAeCRA9TVsSAnZWagAAmb0P/ieU+iuqw0oYJTVTy5DR\ni8+9BIwDJc/K74QgP8dp5U3jw8JZk0Wz1PGyPn9zHvwmwbKlIDB8OMrPqai/\nYm3KZPLKsdXe9QJnLjoJMnzAlGgrmKMB9zgVkQMDj1CvEfWhgWJ8Hb8MjV/p\nQ1TvZSFKxuah60ncRb9gEXdy6+uuQJTMIsGBi7ItC7O2B/2laM6FVl7W6UYv\nfuvphW+QtzfPsEylTLGiWRr3YVmoAwVDLuy+eKqVISO3f6cB4rtb4CCNzpnO\nOiSzQjQmN6pUPggYKvRDrmTxMXbfJxFmPqmz+aT/AltEMKv22Nu4FrB4UNSf\nK7BRzX/16LoEEKmrUiEeK7aArh78x0bsfJbOV9IOwGw7C8Adjbd3/cuzxwu9\niD9EBeAQwhNhdaMRL2Pff6jiMOKxu+vL05LG807Z2ziFoymIch9WQOPwt0CB\nUC9gjXBHkpcEkvct2Y0I71drPHSQfMPjLBJLkw1O3ICJHkpJjJsauXopdSYF\nviq0e3zXhcksiirwOOQAuJA9t7YaRtpggFwkLckcPKy/XWazLGz+BRp1ygX4\no8vz2n7YR9ka6NkqsHuh1LWZ10O50+KltGBOJErWzx3bpalHPP66TYBLWOyS\n0ZI2f3Xcel9FbwXXnAiCGpqABzmUfNlAkVbMTB6qOHYekQNuDZ/s03j6iGW0\nWLri\r\n=T7gn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6t9FcfPXVGFVumjBVY9NinIyJeAKTnE3YrxJ0pLE2nwIhAKyNuMINW0SR4uFoTZO9pBNa9Pdjvh/1tM3LXtqAvtqV"}]},"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-ripple_0.6.0_1559773213169_0.16168799999978734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-ripple","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-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"^3.1.0","@material/mwc-base":"^0.7.0","@material/ripple":"^3.0.0","lit-html":"^1.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-ripple@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-PZ0YuMjBPt4fb9BuKCmoEBxqTr8dmRjOhMDoYLiWEQBkA4ltrDprAT6ynzJzyARVczPo+0T9jiJAmvzn0bbp6Q==","shasum":"091af8f31d1e2c35b99a226fa8e0c94c40ebcfa4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.7.0.tgz","fileCount":25,"unpackedSize":76807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9aCRA9TVsSAnZWagAAe74P/2rSNLqtssTOYmLElCRR\nD/ZoS1qRmSDnDThevL5cmalQp6iVzWDa/ZIyRZnFlyJHeDTRcLRH1qy8XHrv\nCRvo9xsMiqh+CJVQu3lJhZdMzKZRvk08M410jgnQrUfejDgPcCC1pFZdSNJf\n150qsDqbxLkYzwC1PsD4fmGWO8PMMQ/fmF7q7AeVAvNwIWM+NReOgagMOmIS\nHxDgeN1Z0ZEC2yREPSVgXA0NMCEYkSHdiQJEqlm4GGMogQfZJMuSsKtBoXZM\n77LqWLOOj3q76ZX//H1/caeIj4BYvBzk6i8E5mVYyvKC3IwOYJW1tK9veFjN\nthZGXEUCcoIRKAkogkVfoU3YIk11bqxvwbBWBtbSWOSAtGHxBgV7yC83b/3q\naR0dWBCFa9lRijTkrzg6BJvKexqDuXvUxqLzJlkcRStr+5ChksFLk3QA/wfK\nL+HSTJGHSPUe/wfCHSjESkoz4wuMZPzeCstFl6QqPSnR0hTQJT+w8xOT6Qdp\nVxVEV49IJ+XCBGd7GpZavPHUcc0MdIWR08rxWrGU7ZFyZ5D4TBVg8f0NtkNh\nCp3hAb09gOgK8l11ZTeBGAf4y6xakUtf8ARl1Fu1JvY4tvMlFk8e+L/aZtXJ\n06V3quOUXCsHAjImfjM2goGUu7KV85IY06s2QBoS8LO8Sj3y47llElXa6v1/\n17cR\r\n=cgnb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdNIhEx0M+fNTBGiduzENnEdlBhTcXDkkJvTiIUwLboQIhAIOdpHgVhdg/yvEjLt5umopz9tvsBGL54GKiYnEAnj5X"}]},"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-ripple_0.7.0_1566941017765_0.48162065786876207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"^3.1.0","@material/mwc-base":"^0.7.0","@material/ripple":"^3.0.0","lit-html":"^1.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-ripple@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-kp/SMcYgcO4Rp6t6QqHmdHokIjQtGo1wRzUWE+tZJ1tLzbGTaMM3NGyBD2HozGeJpr9ci+qSle/bZJ4TJ3FOLg==","shasum":"5e8834d29f47530db70630c86ed5688beba4e0d4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.7.1.tgz","fileCount":25,"unpackedSize":76792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezZCRA9TVsSAnZWagAA6gwP/1zRxqATQpWWxQ+aO2X7\npMIk5iGAv+2VopDm/SN2mXZF1FKDlbr0GxibVzBaHwgBwMhNwSQIlAo8eVEN\nSCJtlP047LdwVngRU8SCSa/a7GEpHxRCQL3DpAC6sw8M3a4oKWEwHtIw3UiL\nabBny/sE9rxy2BCgD1YIBaABKhdXIuPEAmO7mRgEl2Ttbbnc0KAmwXYkq3Dt\nDbICrdOUVwv3oDe+sC4NjL8gtMFhBXSGYNlsxW98/wF+PVbhPoN6Q+P76DPt\nmkLO+RmbMyumbUR3Kf84kPINJXddUbnjONgnnkLfCuDIRzRgXkbC7iBtKanL\nnOA6b1eTHSLlxP73b10b2iMcY15aC6gsCycVeKzH8JeWBQUgR725x3WUnvqv\nY3217fMbw9Nhu4TB+Nboq7EMS5u5A6Uyo5ZOEa+iMaGuJDrTES+/+cobk/H+\nSuWilblO1SSttxfBSXe/oYvLfaSW+xmry0XnVnVbJkq+uIgW5ODJ+jnoZudp\nsjnMYP7HCChg52JdSRKcyCl0yVXfHRZ7/G/ZX7VGEllP+Hdp9BKA1TYIwfg0\nnNmKSmdOXjZkWSOspwoirc/0wV9TM76W+kNs2z31QPzGfFDeypn68PfhQg1/\nGQ72r8cFz/fm1wMyR8KcyECG5QW9+TItoDiDsmDLbI1U0AU+zgM7JNxR8B0O\nLxTa\r\n=NFrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNDQe+VE2AlfXbD+tYeGd+Yh+mCahDcvtcpK/rTTsC4gIgNzLD2T1TTgqfu1JnobyofuTjg0jAi5InQZCJexEl37I="}]},"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-ripple_0.7.1_1566960856687_0.4921214480112044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"^3.1.0","@material/mwc-base":"^0.8.0","@material/ripple":"^3.0.0","lit-html":"^1.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-ripple@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-hJL+8xNunE+GUk+dtgeIVL9BJM5QPl5uyIufxzGEbVu+pmUfVDml+3HQLapO6Q5MQZMZpO4tDNwJNx9HOAo5KQ==","shasum":"a18e43a087e4356de8740d082378d58a166aa93c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.8.0.tgz","fileCount":25,"unpackedSize":75778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+VCRA9TVsSAnZWagAALsQP/0FhYGRHcTF1T0dCYM6a\nOm+FnV93yRmDjaC9r9aHEgQGBoUgHOlOWbR5O/cFsqUHKJCAUuu6SZsVLJET\n5SsdeIQCN/MintJ6FqpiK8OHN/MxJxtWa+yP5EQdLbRkHTKMNXejx652+Vcs\n1YvQyXjkh+0uFUlhMWFWSZYUxWENdLH3w0hibKmyH0ewBdtctqjNV+iMJDnL\nmxH3FYQpbK2nU7o8HK7p4QiUHPTqpbvMr24MTI1K8jXoT40iRWibTNF62NF0\nJMVE4XHag5EJxeB0qiloP7PGjcDZALdV6JwIfeDRARkq/Fxp4KMkly1y2AEz\nnGCotl64le27IIwuek4mLnlwwlPcHScgiKs2T8Lop9RsZWGCqibV1IcaSEZV\nadI3+RBD/svKdIRGWozwQ84KkQeUGZ7tW8acIbGSzpGvRNRokd5ARynBwPf/\nYpTuq+pII6BIbHzJTX8Q0DUrcwKYLzq3VbslXeQjJh0HN6moFmoMW4/Kisw1\nmS/ulgqeu6X8LKM/rFAOSBFiM083o+jig6ndzzTsDt7NHvRf+SsfLnFhPqo7\nEyBssInH8qEe55pE+xorTPJiRSo6Ae25a9PphqFxoP/iPyxdsCGE+0vRF0LR\nNnIRwkYklwn3DI3yy8SyibE51RMvBnVEQbAsJSZzjBhtHizk+clqNLz6SkFJ\n3wB7\r\n=sAId\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgrc6BUZ1ZPnH6ZfP7bWPPelfdUjhKMIRGclbJglbiyAiEAriKegq4jC8T584T35IIQIIaK/fTYdF5SwQU8I5qs0c8="}]},"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-ripple_0.8.0_1567555470338_0.6933023820040687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"^3.1.0","@material/mwc-base":"^0.9.0","@material/ripple":"^3.0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-scz2SFc679zTo4/bqldkUvD9gdMVr8g21DlGE2orTSkGomrLJVpT9OKWOSc1LOqTiwPBXcd7Wt9Q4SdBhtKXZg==","shasum":"9994f73c206fe55341c493fd94c099adb768c9ab","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.9.0.tgz","fileCount":25,"unpackedSize":75668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeJCRA9TVsSAnZWagAAXc0P/3w33qthvLNH5xNf7vaG\nJAoD8iQxFRJBbIS717ohXC4GPnu0dWvfWH/5IHT8qHP+gmK1NJhxGBykeQcZ\n2k7Hzrdl472uC0WabYDiwWrfYsp08mIAlljS/a5CX4okkRDrJ3FnUS4E2RnQ\nlS2p1+GmnTBnOhXzN3zQeXZUKMiCc9a5qcyiRUGj1+34gyqnbGXhbLaS1DsJ\ngQLdhvCqqZOA+wbh6pUPFcyiH5lPEv1g+qBEFoZArMmS/80N9VKb5DMFOLIg\nKdoFRnajyMARrkl2syLYDcAbI0lzphYvlWVdJY/b6QbdIgtOyC5OQjnT8Crt\n9xHGDs8x1r2BzSEG1oh82pUVEfbYyU291u2Pb2h9kYchlZwe3JyBEjVancrM\nOGeQJUIAM5dQS6MxwY+ylm1Pf1QsPkpco/ublbLt6EJQHlZp3TSGZdmaQTvh\nFX3/ATooDtMBDxQKc3MWBwAVXEKnKWPJ7HEkJkmHCo9pkrw8mlB7n66HAMci\nqCU4SoqeU3tJ7QAnnXWezI2HKY1jx20NMMz94LzCIPaG/5yN4Gdu5Rg1SLUx\nqfSkBzLjPk8bQKRoMOJyaMEDhjigQOGzuTUxwb2/kitzJTXk/mlcz77RbkHy\n+qHK5XkVB7/hQRQ/rD/WnEmxEEkkkIG1ZZeSPzg4GTrr78AWIzveWbcF6czY\ntduY\r\n=uaAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHBG1PJ2lgz/n4PTP9KPqWiTOU7VAJrfZ/91lD/mgbIAIgLeu/3icruc5n4dyEq/sicQXKyurxmPAvbjDz2nmwTfA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-ripple_0.9.0_1569548168439_0.051834359148368536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/ripple":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-8ALMcFPxwM0ocXSLb5nfi+8cjT5R55DARhWoTfxsIL2JKBxpqv0EOgXQpVurtAQPb/4Z71ONboqWXfUq+kbZGw==","shasum":"00f1c152398291a97b07ed4b71a9ae2cea09d800","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.9.1.tgz","fileCount":25,"unpackedSize":75654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm32CRA9TVsSAnZWagAAg8kP/ijsfcrRN7Co9C5M8NO7\nnh/U+c2eQhHJZxprH1+SWNHrv/IDGQtIrLka+ao14Ya2kAMnIOyj1k01oqyx\nr+jV143qEcbaI/l9ftxRnx1kUHhn48m8GmAKFWTBEmR4Q6MjiLK9g78Dw/s5\nxz7xb9WIyDfK5JBSxDVaSbG0HraLtyWkTngWFH8TzDctJXLdfkJQBaewJfZO\no5g+nX4HvXWbwfv5X2a8NgWS1x/uIKKcp4FP1Sqa0nB2+PikASS23caHP/pe\ntKIhksAd9+D6knolBTRoUuYwhuMGG4NEAWa0z2fr1GO2jlPnZJ72UXrjLeNf\npUKPDybd+kFxW+wuckb6WBNCmLatCZ6YdEMeen4WVkfLm019eiOKGsS8dq/f\nsOmfZTqLd/pTXWY7dAi3ii12mY2QFgLIJgF7eKivpFtA/s0GLSHsw9ychQHJ\nkyZIYzyEXm5BNuAszW8R+EX/sebxxpOV21zKc5iN550qBTFVuG+Y3l8iG+ag\n/zlafNwIAnySMRjnT2aN8pidmtf7Dz++pYsQ6BVvUe1mI38Lw5oz7qOftpun\nzSkX9xJfoIxCMPVMLtpCJy0H8zbzxGGgZ+QJTnqyl5MqQpJq5WfyAhBW35XK\n+g0TO31ojYJIPn+V1xL+gmedbCColf6XteInde+zG07NhoGqU4zhia1/KV0r\nRFxR\r\n=sBzA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEvBcRnKr626A3Cjl4z/3cwlcW12cEpAT2xRhqY+KW6wIhAImhHPJnAq/OM3UbeRj83/UEfUDG20Lhm+P+6Lv8HrlZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-ripple_0.9.1_1569877493303_0.5835669725596748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/ripple":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-EP+qQaTm3CTY8sin9m6n4NWLtReTOwhD3lwrmNuwHCTVtnzzUV3bUzl4J68tlJatJz+nXgvpz/3PWEGbngDgvQ==","shasum":"b77005d8e884000c95ee7d2fb60427e1d39e1d04","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.10.0.tgz","fileCount":25,"unpackedSize":75700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAMCRA9TVsSAnZWagAA8kEP/jWzD/EZp1uoeBrCkBC8\nBE3F42xBLu/QdxbN/sR3bd9tTVx1+Qdos6eUihqmK48S6vjhKOZd4+WZXOcp\n1BVtoqdcl4DpZFE6BRh4GS4Z2nlZx/y+u8rLeYL4gs4BsGkXbiYkA5i7cmEx\nqYiXNsPlemDnT4YjIuLuuQpL/YlqxEvbmfxFSKLf3ZtfmxxZ85xXK6sbMSvQ\nDEMgq0IE0efZm89seN6NZzzCdYog8zF/NgPF6dXOgqiLVOgzbkplq/Evvkux\nI7gs50UUsbUPyzBdcaeAGo6D56qJMdJr5qpXCDEnduA1wNe+ANwNgWjukGCN\nfra0oCo4u1xAWnuV5184ZXYvuiH/YvezC8Ka4Ij8TtxIIVgan4S8UJvgot5/\nB6rF6kZtvH0vXyRfGHV0z/A2SnYqB8urA0BoQh/crvtUosx86SkavycV/YTP\nxKBYDJ8za5D7rHYBf/tvkadOq1ASbVOeD76o/dQ9dKmTnwmuw1ARrm33BQ4O\n3i1tcboQANZfbljuCWSyevqIk8tKyj99VuIq6gTei9PRE7rjF+QaMRX9JDMh\n8hzOoeI4CY24lCgUIeQ4AKG2USt7FjR2Ux6Y5CYvkLKrev8DTs20adhJ1m7X\nkQ/+0yThfK+S3uuRLZlXkxb11tbCVJL/4CVcWlFfJ321sKbdTzh90UEScEVa\nlw5u\r\n=duCt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjUlZaxoSzVs3ZYXqweodCXjuzgA2nftwtjqcacIvriAIhALSl2jhNMRYHzYtpx5I2x9bxv26pWcQaEKufg8Lqetmq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-ripple_0.10.0_1570836491385_0.0927611688103922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-ripple","version":"0.11.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/ripple":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Op6veEJr5DGp0F7E9IOdas/kRgaWGvO+5or4hFSwBUkuRVV5X0nHnlNLwlv1E/J9FdafWVN7L1rK1P+pYwfewQ==","shasum":"9fb88837e6cfaa59c5a17c863f8eaa8fc4024959","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.11.0.tgz","fileCount":25,"unpackedSize":76373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3mCRA9TVsSAnZWagAAG3gQAIKgQ20iSpLzFSMXOsLz\nAtD/tAakoL8SbMpPpsGmH8aTUrP2BE/K13itaXyvrJdZL8hVWv8F7b5KRRG9\n6mURJi+K8/+l48O0KjJB+6QMy7Me4u8yVoIEdn8I4Vf3wBEtDwlU7LYeO4rr\n6QlXdlwu8Sqdpn6ostYdu7xKhK5Vf++M8GoZUOfcHfsi3KiDt3Q34GTyjr/q\nXAgm1UXNAqMqPnnKssEnvI9JCBcAZJCm1pIbg+pEAJutknqn/PAQYze6GaG5\npN5e8eaDAWYF5mleQme4w2gn+GJaLJv1EiNiW2hOmQLDroiL8SvNkIugflK9\nCWB9XW7yZOBQaUt3kLmdW7ReRTiw8mwL6Tc3WheKV/RbQ3F5O+XF5dbhqUcS\nW3xSFMj//nf5mse7KOfOoiHihh89b8j/1zluUjYyTxf/vvfcvfKgro30ePQ3\nOGAc4M0l3EpairmMGYYaCP/lW5kJWvbN31GkTvuJMhrxKrsMYEx1Nsri13+r\no5nuUpa9SPO5HBsem79bK5Jy5FMs8RsqiQoPPKFI0jlDJLAlwY62VuNX7PDo\nyPsn5Q+7vc/9aySPr5ZTsoB6gYQwjanz2g7l/+vlxQZShWnG1Z2HUdDZNCUr\nsOotCUBYZHV6L6+G67NPio0usHbSEG4HIL6h8fXYT2AawM/VPHmYn5IhMGAe\nPqls\r\n=TNMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjVIQ0vrOOdSG07AI5TZ9trbNTOOsiG4eLn1Wu04C3JQIhAJWAScQhrmzWFHWA6YuHzoh8dan/5TxTqW4EtpTmQhWo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-ripple_0.11.0_1574804966241_0.5097931844172472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-ripple","version":"0.11.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/ripple":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-BMjqOMaEChv2pWIuZrHZuWSA4oHOl8PftpebPJ4nWXGPSwu7T3xOskBUcT8AD/OghxfyDoZ2166vkFSP+kb8uw==","shasum":"33ffa3c75644e52fe9248335adcbb5b9260b7a2f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.11.1.tgz","fileCount":25,"unpackedSize":76373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK2CRA9TVsSAnZWagAAQv8QAIPnvEg/+Am06LyFHUzR\nZCQgcOOUHI3+bQ8eFKHsc+Rib0CudRsN/dwEk0w9tVy3U0L8uM1yw+gQNmFG\nlZcT7jQFUX4h2PBjNmYgphNxtGmchsNYyY/ZoaIfHPAVxtrcCSpspzVjxcCP\nxf+YU7kBXCSUFgc9PiIAK5hSGLCBQKjyV0O+wexnCpTEEq6V+HuVWio5DIgX\nO7rEkhto7sZXW2aZVhltmCJJCCx0tjb+rRHqdICkBhU2akEvY0ARODq/Q+AY\nV9uaqYWjwz6waL8+QMqwhia/7HsS+I8Vky1q5bHc5lkE1XoIS3ff0aQYboKj\nqSNHiBQCk0BpU5M4kws9LgpjmgCrDuTuC+w3Q7b9wOEr8SXGvp1fGXsjDTwA\n0axW1YSl+yHQoXRqQqoRhc2oSQySxL4f3vymYtx+hbL7EFVSQQGy+r6TsS2a\nX9647/cVuLRhvPlGLxbHNn9S8+nq1cgtk0gzjJU9rUYnSy3GnswU48NN4ZvK\neoq8hxxAqVGcVcsGRnfBXzQuSXpTMoJBb0sezWUN+qZqLXbUfLB6ajMhZNRg\nTXK0dVBzgVQT5XUmTow4wgHUgE/Mddj3AV0XytHFXMhjjikqiHuLBBVj8zPr\n3v1sE3/2CyXuDVZIo1m2KbdGHAdMRK4x/q+vda5ZcrYuxhgvLRhg52T2Vui6\np4f4\r\n=hx9d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs5S7sMhyhfGeG6AJIGUCgH87OTjrqywpStqx4zC3uWgIgfItpYUSqeFGYcoq96vkeXYeaqzYuCHttctiXDtp+658="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-ripple_0.11.1_1574814390010_0.4207698481947453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-ripple","version":"0.12.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/ripple":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-wqYnV8xAfSU8oZ/TmZ64C1HL7xRSdnsTaqc3HzvhVMoIlqtCZj/dmn2QkBcMMfz4YVCM/q+PGVojnYeLH3JrKA==","shasum":"0c99038110397be7d89fa261e5bfca1acdfc8306","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.12.0.tgz","fileCount":25,"unpackedSize":75521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkjCRA9TVsSAnZWagAA0ucP/3UZHH2mynr9qQAKG/PZ\nyRAcoudJ/AZu6Rvb1lq0EcUYAMCv/O3iJS6a1vOenv+oq4B2W75ypcNma9XJ\nAtzXpMqnQjPKIpZnypMNP3OpVqV/YO8QYhThmDKuKt/fL6LgRqzYTwPayBL3\nPWGrmclGXdTaIJ11FVoMe7RMiRRp2EuHakTl63Mk3qsZE3Mw/0kuruDTfgj/\nYAMHmMciNhJwULzlfLKme9NxnspvmGhd2z5KJaO5+GFZCTl1w0UYY2UnSriK\nQntyyjBfpVUEhrQgbiKPNrt97F757UkMHt4mpnD0eKegvcqcbzM1J5cdaBYQ\nKL8dZdjD2Y/al4firRlQY7V4/TMYoKYgjvvSb7MwngvuQdS/hwSgKa8I2Cgg\nVtEP6B/gw7UzK0K6ILYk+URo14sNve3GnJbXJO7jZk+FXcrVp5pxZY6UomVW\nwZjM/SWDxHXWvAxBgmjWqUAH8NQHTZ5lTIKxAFjrYb1+uEbyyfks7t3FA453\n7iokYtkzc+IXnXfEDrgK6i8+NMk3RBMDFrhg7k78Czbjg2E0UM5VD9x/2TYV\nH2LlnC8t6dE9uKHFnigsF7s8g5TZBRXPfwo9i1QCgbwhDUHMyKYkgBApFhEc\nUqUG13lPd8q9ARu9HHFDHUAGkKjJZ2gtydt8SX3SS0dJNSQ+Cwo2/LwBjmqz\nYeGQ\r\n=knG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqo2aYdLPi6VXBJertmAUlEbKfP29sYFjoy8SHNMHPyAiB4U+NtmOxKwfnXxXv0ilQyt9J3jpYc+MYS9Ykgd5ilDg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.12.0_1576626467257_0.7589290964079065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-ripple","version":"0.13.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/ripple":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-c4UWmoAkareL5BCcitJDw/H2+DafTgxw7XuRYQYw/WOPIXD3ILraBydHs/ukapgYa9lRCpP77mOBDTyAMZeEMA==","shasum":"f4089cfb30928af950a94bcc28128194d93e40b4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.13.0.tgz","fileCount":25,"unpackedSize":75521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPckCRA9TVsSAnZWagAA8ucQAIjBcfd4D2HNN88Tfe8Z\nciEiV1fYmZR8L/XKBkysd8sws4itFYdp/HcHx7aFcM+3AH4MZwclI1irqosc\nYyeKAkrEXxO504vhG8dUBoqfWWmKaIR1b57lL42P1xYsRfjvRT08j52zADMT\n7EtVh5gt+cvHnYaxfwx+qrld6OPjcCdCuRoyU/V8qWrHhvIuLPHyRoqrtREC\n4C4CpXoGol5V62Pq3nU7ERn1n0OLeZbhfBE0xJLgdFPwr6mnSM9wrck7apCb\naT7M3gKiGpX9cWW98IH8LYFxsPPnG1Ucx8BGwpDnClYDcBs1WMMXqm1RzzDt\nGSqr1yhGFH3+gnB5OYm9H8setPFB0LE+WeimqzAIBpiCUhN4dxSUm6ruhbCe\nyhvLiOwYrZIa8rfSzO0km7GUt2edXkCzEKfigbV+LcONCl2bNwrpDdtCao29\nDhGx0bc8iIe6yD77xLsmP6YjKNI2Pfn0uQBY6WBsH2qJudJcEeLYTxXypxuO\nhsKDY/99RB7KrNEsSLPdiPZA+ZoJOJCzKZmdQ9He887vo/5WYkMvQVw5V1ow\nQe66UxdgzjeshZ+hrf6BR1tF8lQZfWJHfezgKWW45Cr244rogQfO+xU/pQ3k\nQNaMD2TLa0I807hkrTdN2YZyEWdiJLm+zMOFd38DfBkBhdBp/5Pk5+NA0Idl\nhWrP\r\n=JKss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFERKy8Bkh0butPsIjfSphjFeJMYJ0CwNk3a2g7g/oQAiEAg0sOeDPtTFLcIy/Au6ejLKVrfWei/m9LyuHNxsWdckM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.13.0_1580791588298_0.8203211673667306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.f790f713.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/ripple":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BUT9oi7sEdly7E1bsgUMLT1WX4owdB4DClO+W+q8rGa4zjinTtmc0DZdLyW2gqzGzevczscgLOgwTLatgQiV/g==","shasum":"2b7c39bf7049496d93c810fcf1d757d4b7f5c0f3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.f790f713.0.tgz","fileCount":25,"unpackedSize":75556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHq2CRA9TVsSAnZWagAAXP8P/3yf5o/Jm++hGW3sm2aY\n5PIoQc39NkjEfTwipKaOsu5og5EPjfIJdPAjd/+Vik8kF42J369y0SvLe2a9\nDTROKG3ngzUTWaJVYNEyNWKKeOae+G0C7sTqdFA6B0Foock9SsudM0lYKggx\nOfe0jmYxkR1CCLJuJAMBlrfu566/ERKNJrpBdcLm6NVfyEbr+bUZSEQi5nps\n8HMJD4vJfhhfH6CRvBpM5ciHml/e0kIBnDKWZayHUvT9vpZ+2BaLzY+wWXu3\nN8DvC1RnfnKCXf/LuM7/Tqy7H9Xm5S1cTBTEu+KgahSKSnwMUyOvHeyeixko\nmww8Kvs3rS2pZmVtxd8w0usTE1pABbMPQ0X16GySu8Tyrpi9WiPt5esZnQx6\nCoSP0QvZNDPyg6MvQisruKViyX38vGXXfQWq3r2FEKW78n+r9iYQ0kntpUUx\nnPdKGsYa7gs4ibYR/CE0RkplcHkaZFD+5BWdxfSwCCNlS0jfOW/QXfitDSda\nx/iWTPKUB6ARTGTDyTWrhTArm8hLmzibN4/qsWfhE8y2zjNxTQIs7Dlx6sHi\nclfIcNcTVOo1Q5Nk6qUSokDIT3JJV5/fRb2XJ6PkuVL1Hs5ZqAWV95gJPGAc\nTctVTY354tGTOKhLRUwYXp9Atn1sihq9rc0qGj8MzjlVgeWQIDonchrendlt\ns4DZ\r\n=nv4L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVhLr2dGPfLNNIOANnJvWC3THJnGN1QYyWJZgSWxC1MAiEAvrL48ClHyZ19Jo6qf97fnf/zjZrckViiaEp+LFyJ4Nw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.f790f713.0_1582856886164_0.880359460624045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.c759cfbc.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0SUyuKRAkgA49G1o7TTYzqGjBgwlyZcKu9LxxjAJxps2jp3aMNHguEVESpOmUQmWE2nLMOhgnPCtf2erD5o3eQ==","shasum":"1668000b11b28da6b7c67e9e7a0c91fd2b7b8dfa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.c759cfbc.0.tgz","fileCount":25,"unpackedSize":75556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqZCRA9TVsSAnZWagAA3lsP/ReSRWbWgmHBZ7vsTehH\nPpQ16d81oNO22uPQYJUUI4WHQcEshr5+nFMvslYgA6sXshS9YzcD/EIejrer\nmpD8gsd3nWxssgHf9nDvb78a4Sw18lKcMDfvVuyoxtbwRjx2VEwqLJ8Mc2xO\nyp1iKurfSsuc76TUaC6lVxeWPbsZBKSqt8qaQpUpxScQW9K5R/YlpEcsmpI8\n8ESddddKnKHXGluopIAV9l9o0Tmj4tp7H4XeQhL9oSyMbzYIa4nATeqOC6Q/\n5bBGzd7dq/9odYv949pSA2SAjVIfXXUBTlHGN8ITX+RdT9a1y5j0Ky8GzPio\n/fZ4tn9qKECGfRSuFUIIDheDA2SsYCSIHYT2rBobKubCRs5PYC0Ej4P/4Xqs\nbiDsj8d8nl440NIQae8gGQQ9uF9HGfIb79qjT6ekVaEHOTtlw6lD+sIWpAX1\ndS8TxkRhwCDAYlZ4dOffzRwdmCAsaymdilIlcdL0ZMtpszkiba+Dw4cjcIzy\nBoOC/OayCDeXGG8PGp6T+QCGhnW6nbtrCyB30D/uOAG8LmPZobBFikZsilRQ\nzoxEF+KX79/mDL0Ny7M3gCvpbwB9RNcwXH5jq0Yern12MieW/Qgw+bWZ+4jN\nyJXCrUqJCZxvi53rjUZ6ICQenF4WmPUkOiAyxBZSDdaYFf8CYIbSdgzNlvMg\n3U06\r\n=R+dw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhu+5kHFnafwQRw4vwNSv9ndOA9oLuOmZR0518m0QTIAiEA9Jv3rMrQ3N/RSk8hAM1KI5lI4Q0g2U1oQVAHyFxeCAg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.c759cfbc.0_1582934680743_0.5633997303275595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.97ef53d8.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3Hlf3DMGanT/BRuT5ECHCKrcIDGK6dWHrLq4VopCNci4xZS1Nz6c6u3v4aNslZxCrgesKduu2yPD3IgHIsPGQA==","shasum":"caea7540ec888113d72a7db492c4e1f0481ab1d4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.97ef53d8.0.tgz","fileCount":25,"unpackedSize":75556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3CCRA9TVsSAnZWagAAnLMP/1ev8oIeDk2gBp6CcSp8\nvtMb5MhATYeULQM6qtbcIt0mX3bKe7VHEEl/1E9xiEAVr7tBEQ7APvmii60A\nQ3pCUHqL3pPGSR6pnxZYoXqVlukBrQc6DsVMeV9MvzzNYAuDzjtmiw+3AXfF\nTv8UnfgDLEbVzd2zNvbucYtohuGR5sabhHoeCW1sQaFdO0356PDqVMHgBEP9\n38L3CRPiLOQLhFQC/QluWGpRniNGTiLeG9IjaYqoxGX6XNcqyN1gMBp8J27n\naMVH1930cqTPiTeh8pAFBW6XXdD6fnpBo3GV6di7+VOP1hFuQH+RxvoJ0PL2\nMHmL5poTi1pMDts4sjtTNKWdSRJNovs7a7mxb7R6sfIYW6QVX/KWf4jzgj8y\n0+HiIAsoQBuOSNCuFXDEZV3cDUtDwxJwWdysgaLodUDjYpRurHs/3nqQ7rI/\nrwLh5Sojhkntz8dBSAatUt0m7Ky8yUVR8QCPlVsOx76B61eTjqG9ZfxmJY9z\nAkbQOAlG/6R/Zeljyzt7yES3ryr8PcPAwjYYE9oZ3VleOrqjSsgFkOhXgvDc\n/FPpTisuhf5eVhZTijsXoE85wvwP2teNd4iDeUHTQOt78t7e/VpQ9REu6vya\nrO0tbn7TtperHul95lFYa/sFM5Xm+ptqJW2BayAjbpgy3WsIaVqaaurFMwfG\nbsy6\r\n=KoT/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLD7v6rgTg8HE0vmNRoLNYne/7q13Bfej9uNbz5qQaCgIgHbLeTJJ9cyEEea4+7Fi8NK7c9NmSUKKLhS1SxAcjRkc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.97ef53d8.0_1582935489954_0.3955015292294133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.24f5fa6e.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MKotXwSvujEzxXcl2Uvt9iwKtoKTOVMnFs055Bj4A+TCrbjh7gdjZwPDt3AV40yo1qxT/5cfpnOd8NupXI28Ng==","shasum":"d0eca40992d84e4ed9ee16a85d9a01ea63a86147","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.24f5fa6e.0.tgz","fileCount":29,"unpackedSize":106674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmTCRA9TVsSAnZWagAAAVUP+wRa/W0uHECImvkqWIPG\nEwu1/OPxBfmdJrl9EsrhTqPMRNClANqF+gSlS5vSqtIe60sVo5Y58aFuBYIh\njX5nOy/37kaJoJnFzTRNQtpbIZu28suOVGR4vzoMLXjeYNZ2U7jmVRmL+1/M\nYcnHMT2PoMnlHOZpEo3bvaAD+BXKLftVNq5lzI2XDll66tLpg5wuAYgMxHbc\npJu/DMp9tiii8BlakJAUp/L+sCroNaplal+t0/8mhs28kgXd3CAji5mcvDLm\nNF/2O6UsRTTZsr7HfV25KgZ6Gq7Q/BfbCxznc/CbVQQvEPGuglSAxsB0+n3B\nkqbO9yBB3YYaJhmD4n0Kwp7B2mJR0A48NIQWQWsPbWbwKzZpKiXaq7nbJrM3\nutZ/YlNzFRfiXoNRwOEcdZPPdlWEmiCJcGQJ7h2O1ax7fNRHJ80hYK3D5Zm9\nJM1TJgR6AxazEk3R99VBE9Q0PVaRo/4mx4g7U/ZiqBuXOe7D7h6VTjMSLrqX\nBnGr/8boS3mwUU026kn/5AXSq5dksGLSC1S4xrdqBLqVDX35tdchvWl6m5zt\nZ0HzBSdc38VemC2uFR8WBUqwrp0d7wsxBTP639+oHDfxab7ICG2TjtF/ixVg\nSoyd/yMycg8xxu4xmeqrJ+aDDtHMoCkdmXF1NJRjnelMtWWq30W7bZUeiOB/\nceaY\r\n=IILK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5wALgcP74rED3myUULWAhVptPo5fYAgdK7WaOmLjacgIhAN5H476j2n6Tpu5LlBEHCpnXfsQglMo7Kfu0+lLIgWpe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.24f5fa6e.0_1582938515374_0.9451349446086992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.960e214f.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-d2cKeTDDlA+L85HIEwF446BZbLbh/mdvE1sHO45FAafsuPP+sYnDF27sCNGW6LoFhvNcUf2qtioyWQADho9V3w==","shasum":"5722c533487b66dd39a345b4175fe91d76260a81","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.960e214f.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXFCRA9TVsSAnZWagAAd5cP/0U6TCPYGc64TkJZb8Sq\nplCJ8c5v7k61Xo5MVVtuKNVE4P3YB/iU5uhD3lgStIYcM2t/CiXag1ypUlSy\nFKRaJMOgjPpEGYZ7ImsU6/jWc9ZXw2vdTMXd6/3PnFCa6YQ0YX8XLKztsrlW\noKdmX9zkLXgydXC4QyLFp4JkDUjcL8840OpOVUbolVU1h+8CwEdviw3lvd2/\nYpU3PVQy4XsYS/5kLZ82VH4MA+Z93qvq2ZvDtoJ3mSGetdCr1/DcoLu82Pt4\nUQ0vwY045ewzUJTkMpfbFUoPMnwjuWiRcttgDrmR1g07vzC3V+zisZSxWlK7\nlqZjqt9FnkJSYaUJQ+iE0lchqwevApXyJilfy702UV/Mmmz5Gi5tNH2uj3HO\neX7G9v5BSwn2a+q5FZtth6/zgxYVvaCRdyW8qpFuYWe7yco3we9jM3eE2g26\nj4A+t3ZqMX/ox8qT/WrpLuBAZCaFux01Enk2x5grfFxfezVRb7+HREtZfXDf\nbYf/d3RTgUKB9zK+PNJrvWvPDakMdCO5w1DRsYhNC/lI0cyRasw+ZYZietBE\nYOBHPYlGXnLHTeeolt8aIpgXpxcectRKzZ2Fg5hsfYrgORD4NUwIBRt5dLZP\nI+aG3mAGoHOphKvshxj6TVrtd2QM4RwCyIhGTbxzAIDe3UaEALAZHGeYg9Kw\nmTvz\r\n=trDd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGiSveOoKK5KDvfcXALvXw9g065xS6kSXNod1Y3QglMpAiBecf8jpBBM0ksK0hHtR0HTHLs6Cq+lo3Onxw+/hyDGeA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.960e214f.0_1582945733394_0.08162835192814177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.a2f046f5.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-edPteh30eKIrRj54W26Ao/ULVfe6BSlyNr1G6kFtrdB0YEj1fKpSlKr9fRr22dGfb6QvnPtHe6JWB51xePa88A==","shasum":"157a9c368d70897a8aa76ea8abe1ec7e25f20771","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.a2f046f5.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXas9CRA9TVsSAnZWagAAN3AQAIpUx/DQpgiYgAtsHvhV\nB3fexwCPM1y30uSCv8g1XZ60iC5Ifx6ZxPKkl3DYeWsj/Fwa9nJlhIqe3z0J\n4kOZM/Bfrzxw6yrN77Zk9HKIMW/0NlzjK5UzdiyBVdtffRqKxWQy03l+Sc/x\njc3S0aG40DlZoEqoKh+lFhtN/jO8zg7qXe8B/KSDFoKD5gCTf7H17t/CpS9T\n95KEciZABZKQ9ortTVvG6/Kf9A80FMcaEwew8SJyERw72qcOLYrcKZwUwHYX\njm+k5qhe22b79SlxVkHIOGzUDsb0XxfWZzzZJkRbjBF8Qr22oQojgoV9dc3N\n/DGlc4zDFip1H0SWd3DnY1VplCSZMH/BuqohQa6FA2ace0QAXe1ZJYLt0MjS\ngFQqmIYzi3mpu4eczSBtgoaWgQDNNprY2zTtfnD9h5inRhPMEG+VE+hOQmpG\n1tX0YcE9L9TGGAwpuhL+3iBHH4PHzeVTrwy7Pz4cG8AWqEkP4e6E/dMMkFOm\npPRybGY50xOo4cw/r52fai5i3T4dwLpaFG2saVnj9YQskdfYCimpU+cLjuHv\n4O5wTKjXdvkSpyT0gg9Tb7oOrsu7jB8L+TMWpkvKVRaY8CWihH5a9kMGv9EY\nHaAr3sO8IwfIeYEZJNTPPga5NWweI20/jD1W/k/12PhJB4NZTN+J1Df7fPzK\n8IPG\r\n=h90x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsRNGKjLutSVlsQ8z9YQztIV+FyhaMhs5n3AzVvxZ0gQIgerFnmefrRC/IEZsKCsh4u07JorX7VIEQfa98l8SEQWE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.a2f046f5.0_1583196989351_0.9758779794202499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.024f371a.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/ripple":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FOhtQ6ZTqKyxTDLzmETPoxYDHCJtGYi2ddcrCqhnIYNWi2qWse+ttXsx2R5YRm0ByW3z4K9P3vEPc4q5d3HU7w==","shasum":"f6a6d142b54cc13efabbe08adcaff783cb6e8908","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.024f371a.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLOCRA9TVsSAnZWagAA49AQAKUHyI4XAjwbWHfGYQc/\nN3KefDvLiFN9vZyzPyN3dVP6KrjOACFIylotlcshJQZlE4sbOQBG9JySDdKG\nQ+yFero7M342MRCA8E1/4vCTTXqFlFoW18SiSdvJHCybu0Mm9ycKBicyEw5W\nH+0jIjWuXvKjcYzEAoYLyh1O41Gm0K9YZPROEP/XPkBGoW+qhm//L+1tvpzz\nrDTDVR6/wgE4bSNVHjv2BcZ5JtCm4iP529fAxIYrGokYNou+ThwbaY1B9dTG\nHTdFtk0Z4oS7hJcG4oqIoNh0fP5AbRz75UWS2aX4NUl58uot58zzI4h79fyt\nIQENHO9ypEZ3F6/sphLSYC9CQ6gGDwkA8FKIGpJ9TdeX/VJjl80oadz/stdK\nhtN7M7ewQr9Kjuu+xzzu68z6IamTFnjQz5rlFsrh6M38Ey1exypBvI4n/Wef\nNoU9py67LxcZ+ufMFvserTRHl5nr/FzFmMUUvizBuW0P74r0o5yRMTHj/uX4\n9Y1+zf6YOP7LW7BSUh7MWBDdEfOmxa82/WZ1Yoha4SqRIG3v/UrcdjTBa/33\nMpMwc/wtgGrUf5JRX1BWlVs6LULY7ITyZd7LldrrDL3pEXFPt/zUs46A81Pv\nzV8gaFq93NUUYXi/mwG/VY1lzgYjKgybff2k6RPDEIWMprhBCs3+lmgqGX46\nfT0P\r\n=H/ZR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJZGpYJ6zVMAP19cANJWViiDCphzF+iURavOl4EmR3KAiAfNKhqpmQ0VVEklEE2NKiVAMbF4xsUvG4cWIxdKZT59A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.024f371a.0_1583198925821_0.5312196164179266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.2f164110.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/ripple":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UybT8j8rF3Zvkz9MaCT/kYB88K+GOiY43wq71sRUwQPYH/ND9wWX0pYYBc9vKlRVeW1xnBLyH0GHA1f2lIC/Dw==","shasum":"661dee4724fd00f3f73deccce495f88f0ff3f442","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.2f164110.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs00CRA9TVsSAnZWagAAeyIP/j92MaOMGuMo0nKosm5h\npgeVSt/s8Mi4XW4edbt8txTg5ATprLDk3vHbCR3q8lCqRRA1LBqriu52DAo1\n44Hatjof7/fly2ati2KYiTyiaOhXRc8gZs9uCjoLrrbwV6qRNTv7cEKWCbYQ\nQLGfACFac1PnK1iEUfP/mcLlHC8LC/poFCzlHHnQwAv8tnSCR13DsgYZYmTJ\nghS+qfd80F+7Zv/Zbh6nc6FZJXwV/GMoGIFOZUsG8FmkjV5s775uhSjiCPj2\nyLPLJj1WVaOz8br7PFClaixMKqalZplpyTWbRjmmKVkIB9CdD2XduyXJorVL\nKMWYqUnHF7BkzUjUbQ+NBFlH10Bt+dEk2SadRzJqeMSNoPeZ03NCCoLBJmWL\n/yfuvJ9BPiwCH+yxVDcUoJ1PJnVxQVGjGj4U8mW8qvlXAq5XR7c5GmSpvNJ1\ns3vaX8YXRwK3V8Xv3clOQ5SKXYJRS1TjnxwYthAg7qy0rz0RbJ/Tk4f/KLVu\nBXXwzBS5NxVNm03yOMEyqK44txQzx7l+Sw/guUbGFKQSATxX6kbZm/BUOzdh\nfOUQ9JXfWqki5Dx8xIpKfN4wswYC1fNS9VBdGk690QG7vQYblK96UTHRToPT\nDmjobuQy4J1+mZdhq3A+spv4ueHEus/gK/lh4usAX+h7usixbVsEFjpCHFPl\ngthl\r\n=3zk/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGgKWmFq3lTYIZQKPw1kf7YzVPpxaAmJXPem5OUYG7yAiEA3MTSY4nJsejTWityIQYOR9crJKtgqftJ0/q26dufDx8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.2f164110.0_1583271219817_0.10149173977810921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.edd465cd.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/ripple":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FIr5U1r7wqfbZR9kSOmjqRcBTcUlQn9zbPv4v7BjBTd++NZg1fz3A3EaL9xB7qy59cXERqQBFkBuImJRr9yPZQ==","shasum":"83ecd22c47c00c16ab4cc86f3390ea9038dba54a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.edd465cd.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvH7CRA9TVsSAnZWagAArUgP/j/xtI5/lpPz5zbuwZy5\n9xS5Y6OPOikPTwfQi3B4D3G1Xpfdjb0uqF7dqjVKH0VigmA+hxSpv/qqose/\nFT6lvZEEvTDdWZqr3DJseUgf+VhwHXEq95cJvExvkUBETC/l/nuDJxmfNCX4\nlAnu7mdm4xbKYyOaUtpRrj/VmHso/PcaH30v3+LiSTh4kpvUg0s8VH07N9Aj\njEoukOR9ykjGPTLIHuVY+Y7cNJwX0T/jk2IZiSKRZ9xbbutmZgjVYEWUPCeG\nutr04uuw3awZf1NQfGwMZOML5OChVzP3fvKXmUMv26pMVhyi85vCo7nT1Qpf\nx2vQZjtDEX1ERSlU/1xn+aJGrUJJ5WjBN7ZxANLJglkFM/3H2P/gTg37m8XU\na9dlZBoijHbgbTAJhGTzazBYCxk2gX9A5hl95g4C4R1cIHDFUNjVbfbCARnp\nz0VULYZ+AejZAspDi0ffsguoffDrDA0HpLPSRfuy6YilcP9o6W58kPaCD9cJ\nsYJcSpsQZO6oDC6nZ49UKk8qHUCjrNEBcj6wse4LTRfzVa8/r0HWWGbcyeNu\nOl/+Awa0fPOkOSriQ2sNwh0nltA6VLh7Ey9rAVJZ4LRH6Kqa710EMBcCtjP5\ndYv9zkwVDMv8UA+EnwKTfqxhnFzVKuSw2D7qq0CNAKrPBIbe8N3EK8tUBUhq\nUbaB\r\n=eI/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnJbyO7piH3pBkP+ZxQdDvw6wm3MnMy8j1MfFSmuSYvQIhAPK0VQeuUe9yE6UJkITBi77sGhRqDoVO9dNElAjDDl3S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.edd465cd.0_1583280634650_0.8225205283951385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.2b02d017.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/ripple":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-67lgXLKooLtdeJ44y9k0rZq1VuMZIdIA/IyQPfsjGkoEtD/jxUVvewIINLH69lGAmXaEp3+juYxPcp3Qf98BCQ==","shasum":"853480a57591dbe6ee752a8cfd66d6bf4bf87e55","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.2b02d017.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA0zCRA9TVsSAnZWagAAQzQP/1UlJ9z/3AqYyCVu0Jsd\nlsBK+gzTNZuN+SZwolFkQT2SGOpG8XTGwka1OCFPa78Pt3VMPmPNr/DSc4HE\nR/xE9RBLF3SS8dQ4iBBFGriNGXCquYjoeK7505KvWDc7mzLu39O4CRNVB7pP\nmGa+EN7iK0RvNUu3m73FISD20DiF57maYM8v/KH4zS1i5qLWVb+go0MlZntw\n2Bz3CDXmudmB7N2cnb16875ffZCjRWK3teBGGE2LilVCqTVHAsUDuEqCKCZx\n+MqQk2/qByLLIl8/GcGhMsXpsrrecg8QuwJ1bdQKPHawuUzQYgxjMT2PaGpR\nJAq5RdgZ2EIvz8mwSAiQxv9SsxrBjFKpIEEisgo1TaPCxyJ7XrZdtkeendPu\n3MOV/gXXaE80/7NW9PGa2BZmsS1Js2LS64LmwR/v0q1CBQBtGZrPGFaOZg2V\n6f9xkPVsUfBlt7qFXbJ3ckjXNSK8+1FsazrP7gNW3I2sdnFELaG8ZpqS2LZd\nuG2Y2046wo12rnuEf2qmJ9HHfdxjT0OGHKHqf2D/RVbBXv4aB2vTx0IxwMce\nDKJ1UnrnFbTtFlNRN0mzTGd8z9MFtBWfPqnwIZRZd3KZWtvL+i3NWfCCp7MK\nRDWXsJDIIHrp3oUxD64IpskBOVyKWw22S06iTVs+cgkXZUKAZ9SC4+zmqlbI\nhC8P\r\n=jdf0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD97hB5Y948YlsXNglMNtzPWhLtDbtacCG7CFcZB1EaMQIgKM2I4yOiAW0J8Xj8yQdZSHzM0gIVQjTj1gOHopMguYk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.2b02d017.0_1583353139310_0.28205220403855447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.cbdfe453.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/ripple":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sEeYwOh36wAIxNTned8AvhzCJ+UZYu11q3aJ2maYZ7d6fV7hJgp/td85ateWNZphvbauemWvuCLaF4ybcCu1xA==","shasum":"a25e7c68dbd63fa2c4e177245e23cabec0ae52f3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.cbdfe453.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCE3CRA9TVsSAnZWagAArGQQAJEbsdDOqYs8CdkSVxZy\nqHZEHhZmHwty5UKUxUmIoU3exEnmPLJHLcHpKDNGzlcE/B/Y79nsKTgK0y3z\nwY/rH0/cMTz52/mpX0PfL2TZVRN/fjJf1GEAvJIS3D0ILSZlPnvR0OocD/go\n72WpoH19RIcZGKOGi3fHJ0xF6hPJxFQ+jwJwZZ3kK+Tag0PjAOJ7epuql2XQ\n2vtj43mcTSDh02C5nVXdCf5PfanihL4CS2LcZKhV2vAjYtubyqz1YcY8upps\n+o8wQvn6fG4ExNustjSC5c3yMU3QLAb0/Ws/pjrOjU0doq1xwqJyeNRdUl+0\nRNsyUF7hK9Xg6OGWnpFhKJgs8Kg0RYx3N/bJqLw2DdFktjPAPxU5+Ynkcq0w\n07t8RcOTcMrJSnmrbnXpyh2IV83VB7QTuGd862p1NsOKcbQFwHQK8tu14evu\nF+Z8N0J2r6W+17c1KIqEHakdWrFIztqfOymUZ8GGfFfAR71+AjqClzIjWhXc\npMK6QU381X9y0deSTbXFzqUHE/bHwonFJmlveWkYiTMiO69jDqSQ8fXwPR8V\nu3X9jAiXz8cnTbac801u3dMLkucSKlUMAqGVWVxtlhbRDuQts2LCPf+AEAgz\nS8YMiCHrj8L50P4Tlaj+MVJ/+Q3b+0ElD//s+iEOqNx9csZxLpPw/bcWHX9z\nAjsi\r\n=Zb12\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC68aZ9FKOk/w6G1tTOogPdtZxrlabr4hbRmJL5a2YOEgIgNdTD93NTMeoo+M6H2lCrUNz1LWhQn6IC7vuaSSJgLx4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.cbdfe453.0_1583358263570_0.3533197105805561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.02aa8a98.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/ripple":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3kI/bESHkY4xLxIIuW0i3QEuSsCDmZdfbnW3/4Qeh7MzaidpbwsF2No5SR0bIDLmP6g3J0W9l2B3JPB/PBjqhw==","shasum":"bf2947fef74097cf0d01b977423ebf55f9b252dc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.02aa8a98.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRbCRA9TVsSAnZWagAAFL0P/iR3gEX68eZ6xaABtYHZ\nHIZfOfgwrXK/GGrtxFHRWcwyAN6RS/L7WCGGBp2EF+9iA20cY0lbsyu34QeQ\ndtrrig6u5wBCjOP4crE30GF5Y0ecAYX0zsq9fAGhOYDvj7K0g6wwIo5SjhbW\nkzT49pZQLbQlgPDdYc1vHjLXct7L+HaAZ+p+mygJRfMIoE0oLjHh3P4hYoXp\nPwvi1xdA/I7Tg97HZSiuNrHtguu0Bbe6mdwNb5nRkoIusOrTeOM0NFDMCd+b\n3Y6VkZT9LKKy5yjTL/D67gy5ErIP8r1ytgUnWncRuMu9r09W00EtxB1G47dI\nxrCV8IMYsqsRAsEkmqS0JdgSydHzrBP68JYH+gDAISzGaR+Ws20T0HQVpW0Q\nP5wE0cjxyqpB67alWmnGXuAgWhsn+on+euklodYWqsCB4FLA3RXcM370VKxJ\nAVxCYo7XwxSq/uUa1WD0l5hkl1/SrdWf8TJaOt2jP3CIViiZ8RXtrjLhWtOB\n/CWd4djt7K/d4faqXy/Cb5dAAmZG5hijdLGvtzsM5yrMbWc3qypFckGhoOWF\nBeSO8jQV4hUubaUiCq1fpOHfZOnNyTWaRgieEZ9BPHPoNJ7A5Tpg8O9Kd0a2\n3cBNxxnL6rPsBoi2JXIoRrlmFgALwv+pzQNP4OLFRyMYqSTsnWBjNGH2ISaC\nS5Fb\r\n=A542\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdnPt+Dm+ZDsOWXEkQZdxtawRBPXcx95Iaqg+wFB0bBgIhAMX55j1ZSEv4WR5b01zwQ59QYOL0DDaASxEH1MU69/R7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.02aa8a98.0_1583535195416_0.3743685674083137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.7cd5aad6.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/ripple":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-srEm2u+tUdBWwJnceGKZMuTdoeRcPeiduGXyfBIQH6gnfGKrEfppK+80uFuwkvpgtfrmFNIceLSzKIj5dVtDpw==","shasum":"326f7a4fab404fcc01bd0bbb47b12e3b9e578d48","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.7cd5aad6.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8gCRA9TVsSAnZWagAAyjcQAJ6EBOS7zzPwUPj3MUiG\ncH56EtXMTYaQgbOkYu7hI5dn2dvQMJ57OYS/e36IRNOIZf6IsSd8mIjK0JPp\nSRpeGIL33R7fzDoS/poeE4kV5PRX+fdxySnoWgTkliQ4C4prjWGzIIHpEnNZ\nyWCAQRcrlz8fkqU/uPS2bJU10rk8HAqndllu//ObgFb6gzz6aUUlYTKUc1Bd\nvXhLbMcS9+dX1hLO5yOvMgJhqBpLM1Vv2PKAujaXaipXB1hfszj96NCfCmww\nYDP83q8aIh3dhjwLfns+Ineji6kkvhNtkI841eVnU5yz1aNIwPqobRaTr0Pn\nDij5jGKLQKJvrL39BKOK+65m9t/Rl/53Exmel4ogCyfVwVuj8rtSjFNN3F2P\nMqUcEHkX+r1Pm0zAV2ZQ+svfeaioc+KOkKp6I3saWXZ32ux/ZscMpVYy4Cng\nQjVcd+RhSRWwaxlRYZaoW5/33raQHH9mLqNM4bskM6x1bYJgRmRHT8M+wkEk\njkftviw/k2pGKFvd3o8II4EotCxue4pWcRyexlfayqOitOp6SJawfV9/O0lh\nAU1pyvIXwmE38xRbUgNPPW/ObJOX0c9NdWCEO1gcnQ2ijHuFS7wj5QK/7Ij3\nPL5weyyL0ZHs9efUF3Zi2QhgrWbjcQ5XXD/sijG0TTXqOirFTFLEXdeqHadD\nSdSN\r\n=D8fp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpO6hHvzbFqbglvC2gqHVBCISFUxSYtANx5aYiriIrMAiAF+o8vhIN2+T0nEf3hyWAVCCT9hnH6enx71dTgLoU3DA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.7cd5aad6.0_1583796000018_0.2142923176570355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.3a79dfa6.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/ripple":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7lWkD1YE6+q7XEyGYebxdteXwaIWPt/q4UgARFIUb/PYUIKlvalIxLtzLU4C5wWThIDz6u2hj5s1tMhaA+ZoHw==","shasum":"173000e2c68846fe96b41887b486f8cf5c558405","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.3a79dfa6.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHBCRA9TVsSAnZWagAAMKsP/13AMwAigQuVtT4mR+/w\nebi+NezW8pcJCXwq2ieIseBdjOabck75JFSiP/E9+kT+Wjh+5lOMOKMEkBYb\nu1gCUWybY2qq1AQEU5owO9+uXmt90WJ+bBEEYm8O3bl3HqJUO68DqWmVRoJW\n9a+bFMMhOYI/zBzxgQE34xaaxDhkAdaIbAe3kbagaFuxBAbGllxc5uQA9vo/\nCSjqb8PJbJ6c6LLWzV/cEo36mDE1pxbIGkCLu3WwTntzVuaGoYjNI/juvtYC\nUfqlTrreXiYwE1nWg5hII6T/orzNq6GD9O+q6rss7w24tls8UVjx0OCKTDlS\nLR3SFGNLmAr5jP6gBlcDx9lNMtVpBnPMNjJezZ+p0oBrTMK4Pk5RpEFhxUm8\nCfQD57iJWA4vfv9LClURZ4bFWT/+2tO88+oXduZFAFUKsJA8n6GOlMsNVHM3\nHGPO4AzoOL7pIWbBrRW07ZyNGR/IBSiLfsEhnTocGnGiWatsV54VWRcEi09x\nVI8ICZP5VFOdtasyEBqhnHSzM11LLk6RJeNMkl5Ig517teOpLlm/mhU4qkxI\n2gunq1DFfzevriZEhvLMcEtHQcPIO/UrQgevsS56crQys4H/Mcvcp/kzA5ru\nSCxEGHvnbwJxygC1ak+tl56kY229tEIKVgzQvrMvxIjLz9PuTYJTpZtuffXg\n9AQ5\r\n=5hwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUX8XIv37onCZBXacoAdEbXdcY6jSnbgzAi/f6CMhqIgIhAPUfq9z6NqGIolr3doDJI08+ywoSqOK/uZZWHrGCyT5B"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.3a79dfa6.0_1583808960897_0.7823463073785459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.22e0f5c9.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/ripple":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iGRS1qNFJr9iCyEV7AfkiWSoilBvh5unV1lpgtygJHiDsekEbs4YnwUh1dEu0Ek8qcLHyBpnlTqw+weV2kG//Q==","shasum":"778ce7e650182cdc7b89890445a408e797031d09","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.22e0f5c9.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwK0CRA9TVsSAnZWagAAmJwQAJTnCrd8tWd1feOirz7X\nLBZwMPAmmrD1R3/eHfvSTJ2fHzdPrN7t0uQDhw6iyJzvNOmS+1DsD3fIWbN/\nspHsFqcQ5JCcYuU6/RoBSXOl/AM6oO0/P8HHGG4Gd8MUq9BnV8iXlBZC0+Tp\ntOFQEn9x/QRIv+hv1Lnn3PcuLMbSvXnQIgEO+HckQEvUZ10MmqPiW2a4YqP8\nf60YcdFW/9Js7JrhO/MvlRG4EWRYclo9+0kxqkUhqaEgwXCnP6XvPzSp9qkh\nCT+Rnsi79gSvP3OjwR5kRpEVDnQ41mVh2LlfyGbMOZEJa9Wd1v6Cc4Rt6TiB\nAedBe4FqckEmwy1r40n8T26PB1Lt68shxp8pmZqraZ5ANdsauRIRjWuX3qUk\nnWOo2eIjREdmiLKbR0dO0PMJl2iMj/1TeVMUagF5HTZN8S2g0kd0wam6D+c7\nnuWpq4j7p2O0oWOIzeaTRjy5cGOy9ElX5PByJ87w9jAmYZ1hADzQDxw+IJSz\niNfirEEWZ/w3sVg7fP5jYxQ+XgteMQ7umwUFkJ+JqVe2DaOpQEG2aQyx/xmL\nILl27NvAWUtotTPX1tJ/uYZ/ldwmNs5w7HWWU4XLDLATWpcwYX6hGxj9XRE4\n7iPqPSXoEW4xfwnKh7erEgYdAvvToMdL/mQG87CREGQU2zTFtI0FtZwsItBc\ns2km\r\n=PdmB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRaZUNmkyPuYkXJL8Ew18nO/H5g1fZdTN/AhZTvujsuAiEAvCuIGxURK3APUx37PaJty4ahWlrcFjEQ+LexunjsCs0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.22e0f5c9.0_1583809203640_0.7485330381449382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.f23a1d1b.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/ripple":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1TaZLTSrv9ytEVh27a3oEAy6m3sIYjsFWJZBzlMbyRsm/Ul7V9VnbP9sV8h9toXIaVDk0Rm4qR8bgfK6o3lwpg==","shasum":"a48f70e8579471c83da3bc453b9a78aed8b44242","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.f23a1d1b.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/74CRA9TVsSAnZWagAA29kP/j+N5sN4wIXnTqocoXuK\nn/ScWfZwTN98nJ0i9EYYLD+b2u0DmAAodb0WIQlvLX0PrD6mFO9zC/KAay2o\nW4JVKQMDT/TGxGBqrLX6WbUyImHso29RPHoG/mtlNpC+56WTaMtGqttCubz2\nIRl717QowtkwCekJvu3hM1I5amDsPh9+Mz3Ng6ncaog3zZVR26ZOzTZrobeq\nnR6UWefj3ioAt/Drpum85Jsxrn0Ea0ODpWLDSTDY7W3Txw1aH1386S7ghxV6\nR6Wq86H2SV2wx9/6TgSO8fj0MFSKdhZOTYW4LMjH9z/itnUDCjtYLPR0XuK5\n/Mz4mke0EftYHDSm7TfqE1pgoL9eBmAEjcYm//cICFuGfsVFVHZsFKAX7dZ0\nqK2FRpRwsJc+MITjAWN0LzjNfhyuYMIkk+ueGJ6CPie8zB1+1cTOdzfsTRSk\nxgYsN2w31v7PaRTKcnOlJFW3QdvW/iaBKPyicOPJNDocM5YUzHzChqSQrQ9+\nF+q54smfkAhd44iBkKjl2vNyGW8pDnJIPAewsZOMbb8z5d25kPmeZA8rHhXB\nCNn7FaHZbMit2516rAbtwLEi4zWxxS+jCUu3wxXyctPlkFG/A1ZM+MgeFpJn\n0W15eC5CoQ+Zt1LfIQZPVkXycyWJF9rAhBqEEk8+OAXaO/m6Ly/ZCdDvZbp5\neUWl\r\n=qKxF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC52cdoO+86xYgJWrG4BhqTxx/7y/FxMpdV3f92SRijkAiAczDOO/E9JBDeUhzCT6GFCcKDjsTFM3fjrwd54RwvB1g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.f23a1d1b.0_1583873783642_0.9326656732200034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.34b2d69a.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/ripple":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-yipww1tawviaQeJihtJZX6GDtHcdYaZ2hfW6UMN9chzm7Ab28PvNxKypgu/zhn/DjewcKHVrsbh0l5w/9Ex8ZA==","shasum":"1a2f11287488b3c629ce938def25df6dd0a180c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.34b2d69a.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaAM9CRA9TVsSAnZWagAAZuYP/0RT2MmtP5byrLj6Y7QL\nQUyXN6QXS4f7QLQ/20UGUlMueaCpDMTp5VWcG4JnFVK9S2KT7zBnziJBU8Mp\nrO1z96veyNGNfAfocdREtOqcIvvCPRXeKaejBuzZp4RbW0wyp+xIztjq2kLe\n+o9pZT8Ql5nJ8JLRNjG5QEsjNXSyCE6SdMhGWxyo8gsYxL5ZiBUlHBGVRObp\nEB13Z9np91tvJ5cZANtj7RQ9/Qw2Y25gYaGH6/uYVXreTl0deZs7AyfO98rc\n48pqQ2B6JBBgBgGUvIDXrXVEsmdBG4SCG55YH20YpoLU6B9nc0Z4WiGV937y\nFN6lRcVXWekSnjzQlvLWbGKac363g0p6oG4GqXZdo3hAXKk2uKDY8fBF5oVw\n29H0JK6sE0ocS60/utlLou3S3QzNVMxuXDAAZIn4T/TNr7GRQPXSKQCQXOql\nnp7OF0bJ1DdrgniJ63f2+kRWPNFJe+cb05+V6lVBIW4+aEoHNFjktqbh4zgV\nZw2WAo0z6NPXZvhdxqD2/FlD2lhzDqX/3Hw8xJ+cp4D2ZusqymeXiD6QDhzu\nDIq2tuNN1wGou9LD0jXdvA76zRmi09UCx28YNAdIifBC1Xs23d1bUV+sBBlk\nTbswZ7P1FZ3hqJ7UL1o39+mwkZT+7UbnW6afEtUE5DsCmcW8B3To+RyuVcO6\n01qg\r\n=Uxw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+0GHORoBoyyrp5j5YH13fCDBIYczLOr+A2OBa3rtnTAIgH59oZvoer5j12DxVykkFaXEpx8m9EG2n8SjWBbbPT98="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.34b2d69a.0_1583874877496_0.8462945268558499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.dc04abe1.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/ripple":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-P2SSXpw+jRncn3tSnEkwJTNVDfKKhCU9m52csk8gwWiI29ruPufRXgtmsFN1SHkMKCIpZuaHrPPd3vzuFkPk0Q==","shasum":"4df39a43c66577d5db767f2cc30e9ff448a3eec2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.dc04abe1.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5fCRA9TVsSAnZWagAAYmYP/1l7CljtZchCW8fgALL4\nQ9sJfHj+nhJC8y8qeRf6RP0pyHoz0CI7EX0o+rewIgLZFRq3bI73OqhloZw3\nHi5Bz/1wZ5jJPV7qwi3sjmpchedJ3trOgRP2ehmepbDH+YWkD0XYI2L/SdD7\nLlR4vPOWvVOVw8BRNgZH6glA2+pgNugjkbvflEJuX9WmvKdDJFmb0uPr4GGs\nouoMgBWAl8lJon4+fQ1MRECi/q0nJXdPRoQ/QqQWFeTGzmrLsm83Ma1iRSma\nZzcAcRqvRm8ldf7diXUJXnINfdV15T9T9+39tHe3HtgieKMWMvhIXbnrxLXs\n0pLkRdcOWEE0yEB4RvWY2tYVGxi1T9+bQVoiME0J18lBEE/ac9p2YzKNgNQs\nvNrAq0EJ3i/eQaeA++NV3mXec+nn+1hIOg/Q26MbtTeuNK8sxgrYxzrZUaoh\nXDsZY/L/S05FKugqnaMNgPLS/CWUaRUIxgvhbKUUXV/HnaJMFpWXQBQCX9O1\nwMtgpoRfnLyL6VmJzbbuZgs39zz8LU/eG8JY4D/L50dTyNzookzlzxkDVnB/\nQ2AaPSMDmtWU3uND1qPZPN0I2w2jshRORaCN+LeSCRxDVLOv0fIEez4AZKvN\nmaCZux103EwrlpCyqhvArC5bqcYDKJwuhfFWVOh7Usw5ey1aGbqoBSqsfA5M\nb3JN\r\n=jyQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsGJM9SunZm+KmOr+jjyVVhiiH77016Wr2uJ+mAwk93QIhAJIEkrvJ+jHW+c86+IXZuPlXWPO9j3fJZ2iMdboNy5bL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.dc04abe1.0_1583877727079_0.020133685902068876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.04ccbc88.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/ripple":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including Chrome,\nSafari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also\nsupported.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hgvb2kI3JECqvBNqhOWBBdr4CK13QkmS42cvUNQsn2ytfKuA+TZmbyiJ2zvF0thgWK+1yndiF3xSwqaVl/XzmA==","shasum":"f401d98e175b41aaf576df78dfc3b6e1030a6e78","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.04ccbc88.0.tgz","fileCount":29,"unpackedSize":106684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDInCRA9TVsSAnZWagAATPEP+wY/sC5vsXvBIeWBXees\nm28W4GIRisGaRM5moW3b2i5TFFESi9386LSZmqOpo9/Afg94EPyO+XAvWYrr\nHkVet+FDcKlS4PMILEM26pm4oeDWsmmH2J3gncCgD4mCt5SfRAKtEYvXzm7R\nccxuTcnMWu01U3PDjmSsBeF0Xv3SNIL6v9u6xOrs4+vgxIVXWuMqtmmV0ODg\nANSI3tpKqOB1a7kFLL/JQXi5byTOOrxV3kCevvVxaUtHQiq690UWAyO+E1eN\n85I0P9DHQa6tE2TEWx+abbl0giCFgtOkfjk3Zsg05EhOb4UudoU7WQA4O+vB\n4T9j6xYCn3bXpULy5q9xMw3JBEbACtPbU6tJO4mHopZmS1fIW9uJqi/Wv7TV\nbua/H2GYk4nZp0FndIwRL9kOFQTAaVsfSdD0ln9xpD10RLSfNQiWP0Vy+FPp\nvSOfU4whRoJRVssLp1JKNO14+z+ALmjcDoa5SaZ2s3gEbLxZixQ6L7V43zl9\n7DUn+RX9a7M3Psne/hCKLwwKplXdtaENMPWRg1i7PxBR2BIvWvD+32AJoklY\nmbz9Jz7FIQ4xVbf/MYaQp1rrOJC43uo8MN/2zU8qtEOllmaET8eKJ59kR8mN\nb665EKFGP5Ma1EV5EuLYLJbIddcurK4n5tD6DS4QZ60xEMoGOxFyqhiatCxY\nwsFC\r\n=XJDe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4C32xsESx2+XzkBD31ew/J3e0BA3qaRGBWU60zvF7iAiBV5LTW92wBKOnAxBsxQm2ihdNlzKFP1QGkvfiGwgvMQA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.04ccbc88.0_1583886886937_0.49999037341258434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.55338c25.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/ripple":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SPOJ/KQMhBrDnyFrUXlMLmO6v1495AkZtw02u2CYUWLBGbPcip9mbcPJyR2eThHYoYMFeFZq8eKTQz2qjxGdhQ==","shasum":"71e430af7de658e312f9afa5e2dfcc72a5f2db14","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.55338c25.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIW3CRA9TVsSAnZWagAA17QP/1CcvUXZbqhLxQtCEpHH\nvpegEuWxGMFlAOUTUn7o2/Q1r2kL1KFJzeWXw0JLa2J+AOJQRODL0aZ2O0Hb\nByIiaVTNHV0aLHXrbmo5HN8RPgMYtc0n8ZDBeDyFjTPA5sGlzWiwZccndwbR\np+Fu8uv2yJO5O23uVPOj+oeMBdaGQmnHElLz/EJ1fztkZHl3YaFx1JBHc2c8\n0/1l4UbEBbwErSHDx6eAeIrR0115FHygbvFwLktDOo4npga7DtEJs3x/V6Vp\nibNw8631zvRl5anCC1zr4GKuKAwDTJNaoyUUTJyQT+oHmh6X9IGRrqslBb6m\ngTgOEXVHuRoKraKbWXpc18KtMM8guORhTrdoqu2zZ7MhNHvO8sfSe7S2qkia\nlV3hAi0jIjDSzLFowr7KNfMK3jQR4Z7IfUbkAsPSikH8BFp7cVpfJVMdpv05\nCIYMInPG20syeTlUm0ziBW7+odhKNVkN8lYQYUqDBkJ22m1CaAihckyThR4Q\n8jYvjZhxFl4W3zL7M1G61mK1bq0Igu0dBn+uyDyU/Ha0/p/+rKVfy38ps1Hs\nMI2AYTe9huHe+kKNkn5lq79+9g0L7M4Jyz38JnnHXrqatIMuIeYW6B1qj3YH\njMY4uboVBXM2KKkKn4xjTdMBb0slKwjeNcqMydHlLZoBtpVvinNMo3UTRbpm\n03TV\r\n=0o5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDadgiTzkvViJE+n7qhxsO/QuPGJvZEYZ2m0BpR9eg/eAIhAKPd3Ak7F6U/2m6XEIAZU5dxDb7mUzR4RsgDMbvsP5BY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.55338c25.0_1583908278621_0.8833494819966479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.b7e388f3.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/ripple":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RrOwopFZT+AtYuItnI+WAOTxD9asweVwj7HmAxMLkPjcoCZ+k/0xmUWJ6yKRD7qMg8pIUlgCp48ETrDuKk3WCQ==","shasum":"5c0e2319f27f75b6e12879db9b24f5c9041f5b8a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.b7e388f3.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfYCRA9TVsSAnZWagAAOzAP/As3nMw5bmJgu0Mvmb67\nnmXir//cpPtShADR+CqKBmhS/sP96CeJ47xUa4cBKOjSpQNxjWtiXbOFkRuz\ngl4Ji53qShHw7wGu+ggIHTyaFF8qn204j4eg86veUresHbQjxGjqkl+zNivQ\nI56TW+fXNScu/U75zZEO/3PFFAIqGhGPJ6NobPhzXSbA5+cpvZVQTWy4cyMB\njv9v7RQspaUfBs3gUIAwWdcDR9l1xbKwssRJnmrLx7VrHThI16OC9raflkO6\niAt5P6aEa7L7i9vjyIvP2AT32irFGqLYuAuLzheoQVuSfyBMYyJYN7dUFuHZ\nYZ0pd78FByssr0Zs9rz6W7KUu7OcuyMzvxraAwYNpBHeEdfMe+aYpE8mlbud\n07ojxMSmZ0D+8ImIi1yneOgH2dpCYser7ZuG+MSK+cw2HB5ChrdXyXYnAQGo\nMX5wEHnj1OExqBfxHZSsM9WwKlpR1uOEOundZOiTJO5sYioHyywFZG0XFYcT\nxHP5+60tIo//y2doGCk6Qk1a/omcaRx8IMoBRu2zx7cBVcnGeLt3xFyZuGB/\nwLqfSRNI4KAxDQupunLlBJsxrVopKLuq2CuOhZUhZvbHAWmwmSpZ8jqldYYD\n/kPPN7NxdlEd+GAk63v+JzNEJxIKW39B8u/74feqw/+hKzi7i9KGbwPlQD9h\nTT1e\r\n=a8Nq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBj7Y9h/wKasxH60G25ajYYo9LhqYXn0VbyT1pDlRPBAiEAjiiIv/XrxrZGwDgybKdVRh20CAjA23oi6byQIuSx6LI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.b7e388f3.0_1583957976404_0.011285781516956694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.b3211481.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/ripple":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-g4S+iLyhMybW/wAht4l36Tzm1iqZtP27UlaZi+kRLDqn32mQkOeC+AmjQ8/a/cb08yQmUREJYAgrtcaQqc0bYw==","shasum":"49cab777dce285bc710d564f0ada667b01c4b15b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.b3211481.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjRCRA9TVsSAnZWagAAugcQAJ+D0d94iPoFKOeSNm/3\n1ddjJk4J40OF7uENDF+DL8RDxJcb2QVkYsK7S3ynYK9boWWc6V32BUVqGl8H\nvmg0ufr4zsuCqPyZ+NlCw5c6mfjM/0JSG+dJSL0Kb+O7kYJQtHynVO0y1DWC\nlpwZl2vIkMYaWLl/+C6AjbUcEAKy4HfbSXh280DhWMtAChhVi5pMWrbcnmQE\n+arnH14K3x9vi9ZEMrRGOobl3a+m2FDHBnGx9oLPZIItPmsHKZUM78ciG1Jb\nplId5yVIBxa/yKhoW2/fCIAeoll0aQCjrZA/hBGD5R3p5GZQKBa9BMjxXweV\nE4iRream4s5fMybf7hTeajk9jb+kbHLjzAJ9X5/w3fVOFdy/VHpiNoNo+R+w\nP1ddnXhAzuFkWvTEsxdLO4AHmMs/d74rfB0fohC6ebYVTMTFKmDao4MzgAaw\no4bydlFrx/rwGngIPoKSWJFmNhk/eQrn7/XKWi0A4sIYQGibjxFVbc+Rd+hJ\nOH99GsYV/42HWbOS8WDMN1LsamUMj3z2FH6+pqzIsCF+PcRhge+aicb0uWmN\nNqnIS+0eqOvpHr+cxsRq9ni7rwuW5sVn0xz8coWOsnkq3+zuKKIqCk55d3wK\nUjinv6lrApbprSlovdp/VwtvyC2QjpiLFLn8Srd/nBmJxc1rXmytkDOvt3zr\nLeHn\r\n=epJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKoQbDpEvrfcYDf97ZnzlohrLD22fFE9A4FziwMhkchAiBRlq6yt9Dt+teqfvHBmgSaijD2oUXUwcI21vkd1ubmQA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.b3211481.0_1583958225450_0.7877264899714644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.0b5c7f23.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/ripple":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hvd7CoXQGebkIyvBWCTeXhyU9hI14ctSYNMHjUBkwEqcg+CJ1e7LifnUX/2dRI6xLuSGWXl/7YKYzHd7wC2Kug==","shasum":"0be4f3eabaa48455ec254d37bbc6a6c5d01c34c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.0b5c7f23.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3lCRA9TVsSAnZWagAA0QcP/1YpTa6dmwmz6UQJBuXJ\nZxtqZ0rSSZfuIA2Y1iBYqb/GrNp0i0EXrR4tCEBDTqitEVHJu4BBNTtfaiYR\nzXlswnZ2SbPHGPp9sHppNmqn83NYAnVnRXDnrvx+T33Old4KumF4SLExOjdK\njc9AUnfhrQ7Bo6S0jekipNYyJwv22DRu11rkhQ0e8qXdCkOAJaXLUTyqYeLg\nphEdbiuHOWpWgIIQqrKr8euADrLu+F6Durfwcab7Nd3s2OTqqwxYv3GEzU1R\nUDAZOJQCNzPfBhSTNG5MpJ33Is0AVYu5BVvsehzQf20IkowmCD2GAEvt1w4k\ntLarm8rJiUIygJpM6iCx5gzha29an1Cc7IP37qRlT0BDQgRoerHFRCVtrZgw\nO7rpsFtSgTEVRil430doKdkuSmYSC9P2YiaLmMLkw5T42iXhuBUbCrYOO/vT\nJ7wGs2DJu1s/mj4GUauqCwm7JsnhMEongQ8XaLJHGRXP11VNSXFFB/9QaIKN\nE9YdyMdrfqXogdyNFfy6ZwPh6ya6F+lnFApi/8cMsAn9rjf46FdVzcnbEzZ1\nyHm1HVlDJS3UceHiqSRPLuUriQvJG375xx1SbXi4aABMEEulZ2extoHqXHD6\nyOeo9kfcF8jyVbJ6/Ueh+IlwDVJpXgFymNeoCpAvmrp0dUwTOug6qj/Gwwt+\nXPoQ\r\n=mLxv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyMiiktL/k26nJ/YDooD/BSF9Gy7tsIToeNBhKNeAgxQIhAOOHxCjCM3ZuftoK4o/FvaNmuWxSzNUs6zYUz0U1LdM3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.0b5c7f23.0_1583963620803_0.7688177591713983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.6c0f0b27.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/ripple":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2+wJgOVpfa6DoxPxgohvFiVrw2GxizuiSXUIAEvJ3CwzgLJNxfmzPgS7nTP1bY5SlibBIkN4bCDnO7WXFYFa6g==","shasum":"36e2ac5fde3f1e786aa7d3b34223a035d393dea1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.6c0f0b27.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbJCRA9TVsSAnZWagAA/9MP/3AWGkWzD+KxF40DbJ5m\nmriAdbs76OeXAXb7Um13RLEXKGus1XE/JiA274L14xz6CMvuBRZ+MPRf6dLW\n07NBdRXU8xRdk/TLPJTqkn+GIWQH/E+uyWMotDMXo8BYxd/YaZ7OVrplP4j4\nHEofNtF5dw4r/YfwwcAcqi7TXuOs769tpsN2pejfk99u2y78iO7bxzDgNWx5\nLdrHYoJeqYfPLE0qv6ehcNRyjMumQuMbHAnAh8x1HG0p7pFKcKeKjjY3LFR9\n+WR1hZZmhl2OIz425obUBmW3t8QsNnYMoqKZcAkUd/kCuHJ7J4OBVTYwqvYj\n/Y5+vVBb/lBeYVTt2ObrrEmaLNhvF43fdhVWC9DyJ+vOmcc5O//nF07PmKpI\nbjY2DywjMPf2jrNjKLnmey+7OpUH5G6vr892xrhP071m9wYlrjyOQ8LhX6vv\nhq0MIZHNtN3YQ2jsUjywmsux9ayfdTcZjGmdzqE26eX3r9+izrXaSOtwpFMM\n4AJtIfJNgf+JqaEFAw1nADOKsnMTSPDmEp0xYQBMOa2gMvT7crujm4K+E1fT\nJbFdpCzeStt60liPfChh8m3xmGblxsQp6EbScWD7K+MMvJiMAafYpr9JhtZ5\nr4CPstEvF34ndxk5hxC1J1Yy4j1f34pyOK3iPZJBmmX8Go3JdVm4LjRrImVJ\ns5od\r\n=UwBe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKFMm5cFQk1/OZiE5QVTfacCr1Wy3Lwid3GckCZv8paAiBAr6Kxnodrs7+mCsFZzmD/4W4qWp6YzKhr/fvd7E6Y1A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.6c0f0b27.0_1584047816686_0.6140715128286509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.b6c53425.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/ripple":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-guqdQMynKm1zIALd6xx4QsrsrofCeqSFoXB0QlC8SC1dNjSRl0cyJtTI/m2cSIozvY4pPfMvIVV+yO7FtugjPA==","shasum":"c154ee51df51670a07c78989082b2eb3d0154d6b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.b6c53425.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7rvCRA9TVsSAnZWagAALuQP+gJWeCKt1unF5cIwqW2n\njHYXRgramCatTC6bQbf+7TDZMNcnjJveLtSAycwhQzLcpfYMcsdAVYY9mAeV\neqLWSHGq5gpQRSksHuFLy5sxTA7RyECUM/reQWamoSbYd4JloRsS3+I0phhi\nO5h8HaZmQUJ2VdoWFFsolCWV5t9xEx6Az3k4DWpeT5uKQTdgahM2dYk+JJOU\n8vqwyHg2ZqxNME7He2DmYIP6/JMImcAiJVgOfdSfvvChTISnNAFylfTrnyKR\nE0ydkOlaOgXETrb/9nf+PGcCOfOiAYPhMLioyhHEBjwRbn1rlj18HidocCtU\nvHyRKn6I17ljKH343ku36mIJ+bV1US2txLCRD6o6lHVzDHbU0SwErrcOoQ58\n9ualXxxRDSgtJqHBL0N1GmBFhSIyEJwN7JtYUA8SuC77Xt9/2ZtKjgGon3Kx\niaheAtkwARQ/J66qKT83hVXTKi3XtBNQBsMEDCDCO9XKJgOLfW8R8d7LjbKl\n64QIhq2cfeSPWo+c2Se1FlYQ/IrR4HneXUG0NAM+AYywGxVnQ+s0BbbJ+Jpp\ntzdBCneZEDGqHNk+++uAEsOTrZ+POC/Jd+P6yqCeRyjXfJRBkwc9SktMSdI3\nIbq1kUW0aa3yq+q8xCWkpOgk9YY/FNFPFyqR4h4CcdD0gkdCA+leNKrRDAoa\nqcy0\r\n=OyK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzdjhKWoVAQg/2reCbIugB49wR+rdd3nPKJdcB5yN1hAiBDfYXq2NA0C642b8ZJc5Uc/mKvKPXVam5zOOAkkSJNqQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.b6c53425.0_1584118510713_0.7529032348141107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.306cabed.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/ripple":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dHwZANZTvHfcRUYzoK0TAzzR31wmhExrbFMw+UQ64khsDXuOSH27cucfmdic9v1B/q0C2yfOxCbMAJdv2pIawg==","shasum":"c003f1e03970c589c80dd5527edcbc8f0201cef3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.306cabed.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5uCRA9TVsSAnZWagAAGC8P/Rvdm8n2Fo+4lhqMysbN\nRee9SRF1aPSbpmeNTbMMgsWqxgPdAIHi29iBdjOyaLovQCjqwnJOAHBsRF/W\nwppFDVjzkXmEgFIT4thcHDmSofSikJ+L4A89m/McG0RN5vTQAqlNrJq3rAYl\nkRfoZ3GTcpGmRis3NpoBbXdbFfgKSybV01AxHk6Gt5T8Jlu4VaCWca3Gqwsd\nu4RzNl9PTBoun+7cxtmlqFGNH2ctr+4cR1+uG3ihjtcDA/QdEh+elmW5ZdN+\nbe5C0LH3mZ1fw0XasBPkDNGS4eHf2goktm3xOwYQX9TiwrwdXe+c2YSZZFAT\n0VYiZwooIHlHbXpiAJYh4y54qVUtNJmGZgyE+RQ8Se8ZA8FL9Bq3200ftROy\nUyZio5LkuAmEmBBc9/RdUGhyhWHDrwX7d+JveBYuhkT7ASQH96PBOQQ7+9iq\ncncUwp5pOKdKJP5+rUeCWRjUbDu0XT2l9vTxttNLz2VLP5Ac2AyIAwZz6yBv\nBAh5iCnKP+mSB+hRtwUjKi6KnC2BXA7f1hZK4pNgGGB4N6E7bfwKZfJ2ca4t\nR6wAYBlJX2BXu38H7w3z+QtLB2FwQQ9Va2vT5d+XER+Oksl6peIXmVHsKZg1\nWBmxunpT0f/HrZnTAeJrvHDFwnkA33oQihNr2Gam7ImOto+4wR/EXpvvsStS\ng80j\r\n=fug+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrW+cnwsv4NxySg7WCUvUNb/E5V1ponGpXVI+9l9lj1wIhAN8lkd8k5HxHVyS+olsVAokvNNOCERdz8iN6NBFEW/vn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.306cabed.0_1584479853835_0.5691845533979454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.4e250cbc.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/ripple":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O/MRutn+cL9BHAm6VPlcEa7baE2oMIyF+q/zI4kZvAP7l17UMqSSYrfuX7ix+5lh+MfDwWtyxH1XSIAvr+lDqg==","shasum":"f7d831065966a9083653695579ed86deb9d5bbbe","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.4e250cbc.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/dCRA9TVsSAnZWagAA8roP/24p1CeJnJdzrRQH5veB\n+OaPr+IglKzMW70SdSE7lmTaw5Nac8ocI3jaEgZ1Qq0x0vo4uODqkkA410IP\n4E89ZMKxejQ+JoTlRAvPxwAWkT8crgOhSJ+42vv0NqLYEZVeE0HuyfxWcLoV\nUlEEUDQmNphxQVtfv1vjpHkdppwgkNB7+JbUb6R5zRxfFlWozI4Z45XuBeiT\nZKXuQeDAtsX4YUEQXxKTgYfMs8UsTvaljQ4f3H/66+qhtUgDaUmMuN7SnmmN\nMchidN9IMkObk5txpR6YyoCFJfJV9M19IzR5shSmIqJFGPF9ij0qjRHYuHp/\nqJ+yt0Z8le3U/HnpJZ3FhDMjMCA6DqyYJuMKFqnQ78coIpLvssaqSNs2e7D0\nbhSVMBPLbUMQN08oyZs3nMdd2PtEb2R3mfqgwv5Tm8hlCEralyFFSx/i/nK5\neuNwDDp/Ycgjky42djUxqqhsoVBhVCwgFl21nGjUbXmUPu06XN99aDlAiEZz\nRnWdgD65bEh61HwQxT6f9+AZz84Ex6b9uoXKKnGuqDhiY7qf1+bUUN7lK4Bh\nKjgf7TWxaTBxsrCTr8JOgcvRt+N3tJTxCDR2Z+2pHTH/tOUbwxNQWdZ0QeSg\nVFGxaIDdlNN4/ZHPNLI+mlP6rURrnY7IgiBK8v7TaTEaY7fohb3ZqCUfmyW8\nzOWg\r\n=fRxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9wCfgbKOaoLloUOYaE89LkvUNrI+ImnG7HrQUs2aoKQIhAObYLBTe56qgOMOE5uEarpmt7Dw+3XkZXNGA9ccUVHQa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.4e250cbc.0_1584480221193_0.5613080070508818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.ff82d9ec.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/ripple":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ApptI2Yasryy+n+f9zIyS2Z1VWmDMme7RfKfqaa3K7LRSvGOneVuP/LMlSm7jKK6QUvNQoO6r6w9QD4SjlEP1A==","shasum":"699d6f8d24d08c707c999ac01ea575a2f332f5bb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.ff82d9ec.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmYxCRA9TVsSAnZWagAAv2UP/AmFc7HIjKaF/clRyJ7c\nb/XZIvfaJF3XF1YrfazPb8qPMLuAGBaeziMlBxd0A4e9yWoI08FPVH5sGM1K\nJHWL5/gtt6Jdc8uX5M1P8FLJjeoSykLhqKZZevQkyzyukdexR4Ov26QNOyws\nZHq9IfF87EgUyu/6/JJpT8Mij5akC5n4tex+2od3MbFC3jTSEYpdXAhKszYM\nTl4zCPQjkS3V9lA2kZFIiFP2axbYlOFEKHYC9GzNKjFc6RBzEGLCsjk+h8Jx\nn8IFNifEhS6o/QZMJy9pFobayxyDLwtoB5fXrQmnHdsr3IoGkNYYZ/+N0tD0\nQmasvCItO8tb0WotYNknCoUI0pGtfrQKkJFUf6k9zw0NQTFhLALeA1bErS4o\n3TtgtaMqJ7gy30MiXD4/t4XEg6M0Ngzr7Q4fH+6k+WWqfYpZhmS5Jebw0p+B\nkjsM8nxKOYAZdJxIG9O6KpqruyoNINttNU96ei7HRJwqSX1xCy+mKlmGHQao\nwxfWEYv/rpSUnPIi/7Rz5vn84pcFih8e22v/FU1+DMUtt4AX0S9LLTC9Ttmi\nbZ6/fIMNf4d1ghAgvAkk8YFrUXHu4s1xHnwgs5jaRJRYbeLF4fE8bqwDdk/m\nhZZ4h7HMhYd/cXSXFDMWDRLhZ5MtwjIBiJeO0G0UTUfqpLMoVd2QjGx5O7NQ\nLcZR\r\n=MECi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClB23H7DFNOoL81CEEFvU1jv5kX1KTxBkU+CkO8MChfwIhAJJ55FFL/nmIHrcQwns6aKKmm/7Z8dhK41RFs6QxdgYN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.ff82d9ec.0_1584555569210_0.6212599144012729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.f50f48ef.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/ripple":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iSRs1szS1wmKPEKIYVctD0uEAor895xaxV+KGRnDkK+X0HaOY7FNPyyBmx3R/WDwxN4JgZCfkGZ5C52kPrq4ZA==","shasum":"ab2f64a49166c5712955d2eb096758218f1606df","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.f50f48ef.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8ANCRA9TVsSAnZWagAARscP/irvw6KhCxp8GS31RK/H\nVsOIc1XwfbDcNCN7KgtYdJmPQGmiAlz/nmHktQfwvbjFiIpnlnesHxtdIek9\n1eR3NThbTTlMF4X4ctPeYQBAgnSiBIEZ1dzJuuB1bEMqQAxtXidzFlUyKCTj\nQwt8D2Q20DCQoXSMTz7gJY6uLKD/yVCfWce0qlX0I2meGDvp+CR8kqCsKSGQ\nPJ9QxuLU0VICn+OB8zJq0bgehNFy7+Y/Vs3RhiwgkCy9dAGsXhYG+LOqTLkO\n4krOHDUqVYddeE+8N5WGe42Mt42alkTz9TFmQMNexPaVRMx3ZLMtMepZAXbU\n4X4BJAMj7TxUuqQgyNJhDHasUA/IzbnrKpc98CBYyrb0HLQQqm/4XwhqcSpo\n9v1CjEUnIKrqV5FSDa9nRfNpkcMf+1M0xJUIqGVdSMEqMowaA0+9iLrO1J7Y\n1cTEAQarC6ZSu55jWigDLbjjXVHf+6P5EwzwMS2XyUxK5YLmWaPx5nufAUKo\nd4PLKcx/PDCnMGD07G26rmzfrAmZU0FxSxwc7/vK9eqgQZ6laRZTH3/D+WaC\n3fiiHIxUniK6L8Y/jomT+WIl5LiQrA+nEA6DmqC9A/ps6p0AXXhXfndTjsjc\n7t7eYvSFKXUlpPAp43SxBzxxLEnOPQHJyeArqJlRoylqIysiMttXkxqh9J3p\n0qVY\r\n=BfPP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFuF4uRcXdsqrqdLSEPsBkWzC3N2OuTtu6E24c/kwyUwAiEAr83qnfhkFYwilYsbvsf2K2D3r6tkNw3OK1wF7tuYr4A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.f50f48ef.0_1584644109041_0.7853397847769612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-ripple","version":"0.14.0-canary.134cf877.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/ripple":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sJpLLotEpOG1i+i952zXq9NkANWjcOpuehMxXXt077apoLYEgPC8AEkdW10b0WryCkq2pujnk9GKVVuVl2/KCg==","shasum":"5cc6e836ac744cda56df0cc948150567c3aaadbe","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0-canary.134cf877.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hrCRA9TVsSAnZWagAAxsQP/ii2wQkVCFnzqj3mAQbs\n/Wr4bS27D/2bxB3cturXUFbbXYwjj890COTW5dZ9fsqvflrGnXcdpUOEIWFC\nlg1k7U0m2BYjMq6njRM1t57JjRbU62ZfcwVq8QH5QWY/21mFsrZ5kIW7Xe1P\nTsXWCWpqBijm/QAi6fNbsl0a/pTEBxxgAzYWMbZyJwC0pCl6BEtViaIaS9yM\nK3VudjNxyHZmEen2Au4mxNcbzBAvVO1YsJ022of8txoGkHL4gzTdVaVit+yP\nhDgD9DGk4Ws0WVZwSEblV4g+n5UNVfIcsfndH/gNOwqX+jSpZHDW4GR8GrAS\nQqHdbGu0WeDhe8HtDOTnw/Ar6vnORZ1yV9trL4z1QgdayHfjyNHqwM++Kz+B\nO/UOjpC1VRm2/mz/EhYSIVC+XX39Ebqz8PJRNEv4b2WG5IQskG4vGJGDNuDU\ndWz5cZukcUjC9wH11lINlaNw28k96kG2UO9JrKFxxZGEh436lsCrPdUSzF+j\nZjgukjZHxjaJfRudqs+gHfy7LSrMpetOvdxpGXMAZga30VmzG+njOTvNwXDl\nX5OgrHVbyI4ypVhEVl6ComH0S4+R/OFgyKw1kDbhBcEunr8NEXh+dHSXW0iz\nSKeE1Uw6SCeYBFeH0T5sQPGyDGsqVn2CniyzwA0u2NnHgiiwaosQB7a2FSC4\noPQF\r\n=pVqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnMN+V6lxHJiVfCG4U/9qvzOue6sLpuAQlMXMVEqNIcwIgaRNI5U44F5fPC7h55J+MB/f0sEzoROc1cmT75Z6Tm8I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0-canary.134cf877.0_1584650346730_0.7496698026678912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-ripple","version":"0.14.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/ripple":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","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-ripple@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-IMvFziCSmjXG8psdpllwfaZ9zZyJt8amWnXmU5D/GQrh5X9alXvP2kQv8dr/nFMYiqqskjDLnYEzPK4u8tSMUA==","shasum":"d01313fd54c5e11f6385171ace667df038f079c7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.0.tgz","fileCount":29,"unpackedSize":106648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QACRA9TVsSAnZWagAA0OsQAIaqHANSnT2HKGZo44a8\nQeAg0Oc3qRryZJSiNZZ8ahnp4X13+xuP/PX/k5Kl2EL1YoX0hKJYiOhvqj4W\nuPhiguDPVov+EkwfF4Gjcdg/2AoYn2xPGLFO/pT7VehZ4mXCQ8zVv428FF9Q\n23G9mKYBXBrPklbDeZMw9K3GWhn6nh7J4JVAVtirjjb9VviO1+5BB53WpInC\nv1JuXZWTOAOd43dTOQ9RxPIoPOORiIdFjq9pbTJaDTIk6MczzVFyjDNzKnF5\nih52nxhDyvtUcHpv2Fbxv19Nzi5VIFZeEz3EFdcpxl7DqZ7kKYFHoLkSpaCO\nI3r+uEZpnn88FFG+OLNqDBUCMuCUkGawH70lrMJsTE/QAUD2Z4B2uvYWtHkA\n2W9X67sysV33rnGsdAYIXayWNmmn28BSdcQ6w+3Y6ROFtIG98/O+3+KBy02z\nvpjV6DJYFiU7em+KSSZFWenev290Or1DthvPApAQmqEsAYJf0ZmieAT7HW7/\n/aedHsvyVdIdj1pfohX81ZdhlpnbPXEGGRmUmvZlk9v2SwNYpjmQoQ4x03q6\nlExwAcBbY+MyvWyCqOE5MTWuSgT72BeSLrEp0KZb7xfYPSm15zoceavW9PPU\n9NTsEttcGCkso5IIIJQQLbcWw9Qi0RH6sfxXA4qgsqvw9IgyNaPDaR7aYj7c\n19zd\r\n=8+QM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLoLA3EUf/GlwdhSWMGNOITlkVECSG/9E3EWLeUvEuGAiARs6JtM+Zlzz9JtGZfOFY1i1LbTfUu6/SXpRKSoJm/+Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.0_1584653311704_0.7849055429738485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.2c1a4913.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/ripple":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UIFSeWtzPgWY3HfT44061K0pYpP9WWpEgquiri+yeSvAmcgqdML6Ad5gBYIMa3Pj7aBBGSmjbvWN6BU3XnPSdg==","shasum":"84397fc84bbb5572208a6d006620c09d09677a42","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.2c1a4913.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mbCRA9TVsSAnZWagAAqWMP/jL0t0IFcY7/fMTFIDT2\nw7yH3vzCTVtt9aPskHkUYdx/aelnjlUlamzU5kjUZXEyby/2np0GZR4C91yF\nO7hhYQ8HbscV22+7rnpO92SHju5VJffBu6PZIKGa3xPigKcm0qTsI31YzV38\n2wpKAfdE5oUgnypkz9yRUO2WKjHSDPJEQmFNC6k9I4osOIDiEXn5A6xEw7lH\nmchHdLHNf6K1LcZ99IvFAi9AV2cK/kh793SUNaBu+S5SctLrKcZLiCcSSflU\nDdn144H+g+RI5TeyjP9eGrHcKuc9M2iVkrqbECGtqzwrUgmdNbnmnaIr1lKs\nxPh/SQb2+flabtwANQhS6UwVROj3p0bhVAg07FEliPaUskbB7Kw8f/pA8g0h\nfl2NpmvImvT0wdqvedM4hoB0lxHyzwKOaHUVFmeVTXlSBrHj5E2kAn+mTL/8\nMR2YpQ1sI/iDcFVx9qh35wE+6o/v0ArZ+eMjQpFiwSuvm7uM2ClO7wy9Vq4C\nJjdeoOwkJx+NQQMmvAXtAu+MTBLPMWcARUS6ap/sZ6vE6bAD4QfmjPb/OoGm\nEg7WOxUdqecZbXxtc3CAkYkQW4zSbU9M+p0INUVpF36pQwyPdtP+/nLbnb3h\n/gNOBEZIqRFBALmB36UM9g0IQtFCFENPocNUvtdLBkgV3FUYtyqj3mRJh5iG\nqA+u\r\n=0qt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBom8RAlELFV1VJMvWLBCz1MrY0lY/JeEW/ThnHzgfrlAiEAx8uiAvdMGFFAz1g7NVJJbonhs3PO1KSEdpqsd8uVBdE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.2c1a4913.0_1584658843358_0.38305936432345167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.3a6e481a.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/ripple":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ubrpRq1KtP5zUMDk1oGbNy05/7X/dGS0lPrqksKZKE3c3rDh7XihTTqpcy688VDhiDFWZWgiaySPMc53uvAGbQ==","shasum":"abb75a41cae528d60dcd26b93795d594d468ef91","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.3a6e481a.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQelCRA9TVsSAnZWagAAchgP/AsIbGhBE46+7tjVPRfs\n1XJUxc6jzRXy5jphk4n7SuipZXUjbzWL6HkxUoB53DxVgzbgkH4oZCh4uGas\nhnZnxu5XJdj8ek2tqv+XBSAorYf/8BY+JKPEwHJbplJlXFFPKaMRyzMctcBr\n0xT+cL0E0hBjI/WHLGEWNYkinNqjRsC497QzxiB3KYqcDsn3FSmD+qVgB21W\nBj4Vd8BU1OwLtfH9rOdZI71afjIhpv7icjLdqIkCNbFq0UpoY9AGJd2dEopT\nCsMoLfBrxJ2BP+N6gS8URsa/mKWUq1FbYn34HAlJbveFCY0p5e58Nu+noTQw\nY6xA741R38IoHrlFiOhJ1JUb6cc8SABXWbOhn0TaNSxEaY+jpStKqvE9zGzx\nVQ4+lp+cPApPiCdY/BjrW2hKVQklJJsFtN07r2/nypAlb2HaVXj3Obfp179a\nrWhO8a52nhxa3k5eoYnWVZ42sc7p6RKpL06q/+s/Fl5VbOPdYGniPY30knu5\n3nkCzLncarr5qcuYFbSizP6fbIUKITovO9iqn6i/o1mCSQxmv+Gg0S+eHyAi\nuSLK433fJu55kIxaPcSIym6NS6pYWL4xyVout4Pc8f3SinLBXtMcazfRpZzM\nRtJIloCjiQGFi5lKpLdcogOWfqHnaZm/17FLiq6EAeO4yL371ElIwK8HL+Bz\noFKi\r\n=ctIk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsi/OObNBlnCwh4dJumLHwr88AZ0XSlUE/AMykt27ooAiEA7P6BLYhxXfwsDl+jCUmi0/YwKQTEu9Naxo5e/2a1Nn0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.3a6e481a.0_1584727973018_0.8989484439870916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.603d6eb3.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/ripple":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7cdariaLdrskl/FbLjtbqlqDK6VZUz/B2e/vzFUUyPZI6SMLQFlwiVqMAquSMm19RvBXZQjSMGDkVJrVXdxFtw==","shasum":"8dae870af33b9b69b91ca4c7a0396890e4650a7b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.603d6eb3.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTcqCRA9TVsSAnZWagAA/YUP/1Zhsx3v+tF/jKH5ocV8\ndgiRZhQYgiQyofcgb/MPrCiP72IM0eT8Uqhfqyk/2lhT5DBGlg3DMIixKwrf\nXvm+0C/Is1xiWkPwSrd5IB0ySL1JWkLqKr3NYWT5gfjtVfZ6ssrSWJP5t0cB\nx3Oc1RLrbIG4vn6kBkqGMrrORQ3W7p1dKmuO/oAx519ZgDTmDx7eDiIa9Jca\nG8C9NNX+GVbEbragUwxVHRlPeceWyF6fVlHiffeTfQynDWcnxrVKpp05G62/\n/+hVR2pck3DM+CoGOP520xxqJHPw+X9AAbzH0bc8Kc5P8mRu2OgVv6z9M9Ry\n8Za6bPZ9fZnS7zeRF0T3wnZEk/O+gOd4QWD5c4f6n6HPYiXe8A0smiZDJw6U\nCyDfrYmMbvlZVM7nbFYoZdboWTVrpwuPi2bQKgoS+AWYmeQN5E+w28dkpemJ\nVxXBsyBf7w8rEnwW+tlxE50zPFFej74Jp7Zlh5jcp02SkBnpBtcv4b2kD1L2\nY6b/sahUP3j0s+c/Lwq9EQFVu5jI2hfddBboqbwuUMyJcCJWKFIanKi8Fke0\ns94LHp3SHgEaXeg3HMmuWF5VBvWf9LqP2cLJFKCb5b7/VcD64IqGT5cg/9rP\nNgsfzecF+ucp47viHNogrhsJCNF16mWMJoVzKxL08xB7aIJMa6DVFFGoe9gI\n91QA\r\n=V2hn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZcZ7h6v2k8mszQXuemLXqNqwpVaHDHKjorGdfpeWJwAiAJlhjK5LVYrdvxkeXx4jE/ymc1wRA18D4+DWqsplDNzA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.603d6eb3.0_1584740137854_0.5581933755042023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.05c6a93c.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/ripple":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HIFGYZ6svmAJbvOZeopFqNqwCwYvkbsNjofoENvNGmJvRYDMI4d5fZGdOrunZfMVrzF8JyYFDa65UAdRFMNZ9w==","shasum":"770318c8d7dfd77c4b853485c45d9622b8bc31a6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.05c6a93c.0.tgz","fileCount":29,"unpackedSize":106683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWBCRA9TVsSAnZWagAAUGIP/2Z8RkaDt519aSszn38E\nyqCVXuEMO1sJ5S0RP+0imhzsyFD6/mwTpKAsOarysC7gdxOi2YC4Iey+qBUR\nmtL7Hi28f3wMHBoifjDOCEPd+er/j0W8KLmRv0f6Js6eMdtiHQswHqaKIeT+\nAmwRrqW8Lj07hkNxqxFFfp/LgGdVrfFZgcesuQqeNMRlEtRY2BK2bTFk0vcc\n89R5r3ruz6/iEJyda06c7LibwWV/huc3aHXrmRFlsmkiIiYwUuhcnFZooFJc\nfFJfxVq9HAsF2EKtveHRzhTXFu0fY0jrtJtDSat2gwrn2iUbet11+FAj/nub\nxcAwnnXUxCBNDH6TzU6pL6YW3rLNz6qhMgv3iztEOFZdM6mV1w5vaEhh1Tnl\n1MbSQmUTJBrSA6WuZeXfHA3HMgwRbu09CvQ4O3ZGsTplqeGWtzQ2J+ZkDluF\nB84cTup91JWeqasTijg+BpGbZKCWxT3s+XJ4r9ecaB88D9jVExLOrr8rgJ/B\nkr0RZ+L+D4KLzkKMqRuV0ZajNR/K0Q39AF2g9FvO5CzQEEbiXRRpWNeD7mGx\n7BluDoSgERdz9LqsZWsz8ol1Z4Gy7jU8FzP4hWOGGW1kDmLH3l1oaMqcGk02\nKYYjWXsE2Fz4OeDGB8RfZB0qfhtAhLUI4DcLZMcUpErqPY9hM+HEj4isU2hR\nM4Ze\r\n=7RFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPf9ilAAEvqcMVdZ3XdQ+ASxHZVll9MGazpLMBJ06YlwIhAKTGMG81LjCNTkOS9P7hyV1FF37d4oeOsYhGDLWW5RKo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.05c6a93c.0_1584981376763_0.43953998379704196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-ripple","version":"0.14.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/ripple":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","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-ripple@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-UdGdkT4IlkQ7myWSeOj1RqXvneyrkjdBTXW0iswFySRRkbJ9f+g1771acKASdRG0fx7GvrWj6RPcBZzD5S9SmQ==","shasum":"9550d43dac6455eec4c3cf18494a2448f471a852","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.14.1.tgz","fileCount":29,"unpackedSize":106648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiFCRA9TVsSAnZWagAAJk8P+QBcVjszylv6tpL6dMFb\nW2RMXOJLkgmHKzkrEnXKyYyby85PKF0z4a3DbkmDZXlRYVj84UELCEa0DE3r\nnJtxMNZRnqPkqDNPvrJqODH2THPx7tkAGZzqfLbJHGrxu0aV0X/UEke4MiiD\nMi7p1K0VQLQixl7OfOE79HHfTMoMf8zkneLE38xLW+toVhNALLKoU8UlZMLU\n3jK5NTON1bCjP4S6ATcNWJ9w7uo6Ct7nuUEleD76eMK++lHofn8snKZYw0jW\n1eRv2syNyDm0NI+doxDPScLUhOmyAOLGfcDmR9g/ZUs5ExTZXMJjB3C8IC56\nQTSrqrmLbrieV1Hii3ynQ6XHMWtitVZP0KyIp5AM8rc4Z8ARgjcentFLuYfK\nowAH1NsEg9g3fdsSnJ/4NUgRKPGzfx34z9z8/ONaOVsq/sXgaLZCzBETkyIZ\na84yDZnAu7hW2ajuZwnB9mneWMaBMzfLN2c0Hj21UTKuuv+TOjalsSzWxbRK\nZ0GQIFkvvK9VlTpowMUgN0E4rz+znAdN8EOXZWvjJR6VuVnDlSyp3SsHiVxQ\nJy6hT8/g6qw2BFfcnG++Qbwr+hmWhOzypJx7pPtgSVT8krsUkqebiQVNcNxQ\nuvmQbpqce1D0WR/VNhNBHnCrtbJzd3EUaLjzLFxB63i4bsI48w+7Hks7IaCo\n2t1o\r\n=nKsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtH/h0DbDJ3z/mmu/8V56I3PoUwnc9Eo7qjJN1sosg/AiBjbEz1P05vwuEraCJqWBhR6esAEHni1tFNCaFmrnGsjQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.14.1_1584986244806_0.7294006275706002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.4e6be3f4.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/ripple":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tvXcPbLzoYWIHXnu5AYtVEMKOMBZ8T1+zPs6wVW1lTcvwutCJzKi5b3JxaTQxxQho8xWIvoIaOOb6wyGXwwwQA==","shasum":"603ee99345d91296506603011cfee47e640d44de","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.4e6be3f4.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenR9CRA9TVsSAnZWagAAc+UP/0dMPEF33dyAX73wzpY5\nAlerI0gpoSUqvOBjegU0X83dFYB0+eRiZjpi/6B+9QBj90fC83caMOy1p2ip\n3WdU91ZgoqBne+UXDSMzM2bHvZwyqj9IymyHK2yMk6ImYldhGCC9O5g6+0Pb\nDV87/uWmzxNWO/LsyCU6TiEFFEz/JvPwYnTDfB6puozfG2gUOG81zkv0VBvg\n0a5kh4Pkj2EoXdxOpbMezo8YMMCRLkSzj7+Hhibj8Qo7u+t/ca6xmYjD/SIg\nJTy0CE2SugO3VwjvTpuLkSemsGGWqXOWNGyvPA9olxPqko7lyTIhaCxh1Kgg\nV89u+4DwrCE4QDv2W4V406b8lKeRvnNuiYNScQVGMWL0vk5C8GEpaFeR5hTE\n3hg8gchN1d8v1vDfTScdcWja15ZLRNB5v4Q/uNVq3NWK9iRK5Mje1ryqPYla\nqiSPC7nUq1l//1M6VdMAQCCHImUvpAFomiAgnFsZT3N+m41T9o5AoF+fF7Kc\nJgGNJ6qmmKfa6X3XMoTDGSkD/tYOLPOvupCPxOPrePRtdRNiuxreng5oeSNc\nzgmvqwzJ+Jn8duPuzpBt4rBvcrIMFRLCeuRLJAEbx2v2QQSfYkrCs59y/pqf\n9tMVUvyLOlSOmT6Kxfv+v8KDuEXEGWyZL8VXgTfnM7AlpmGNJu6oDEpE27gi\ntsPU\r\n=PKs5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUmfN8ndFszOHWMQIUFSEIj4bmfh8cL90BbJpiZOilpAIhAPr7jkH7ZwX6KUniQZ2DK3WmDayqtX5yHP2TeUKuue0P"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.4e6be3f4.0_1585083517469_0.8704330024375146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.c29a683d.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/ripple":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tgab9MCqxOPsDCYMlftRcWGHOhWd5WroZ5POLn6qPIZSaINhwLIumrXZkZWD6KEn/lmzVFTcQP2O0JsrkicIFA==","shasum":"df0620c072a11561a3aa870ede2f22a2f35e1887","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.c29a683d.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenioCRA9TVsSAnZWagAAbHMP/2XLvmmd3Q+z4emLAgDy\niZdqcLAUBlYLMJ8i2Ev9l75Kbu4g99ChH/RoO0erwCBFSUQxEuafa9PYSe+5\nuxLdI5p92+MPESz3EPIoGg1Z3orbVuIiZyOjoaa6J380ZAJrdrvtikYArAvb\n9lTmjOp9MxpgYrMvOsKinSXW72H/wNgleLsC2OieX2vkEDdqAoIvEn9w6RfB\nvStwsnXjeS6pVzGOI5x2g/ZkHPonwkrUeg1R5qpB/iNmWpvoP8uZe8dhEtx0\nvfkd0ertnAFis5TNmNZ92EjppxoVArCBUHIXtEJnr9v7BR2mDrYPu4Ub1tyB\nBrCq1Rvr0umChsDErbXg79Ci77FBOMvqUyuTEYAPTrxwm3Ge8p38NcABQtGD\nHmDqltCM3y0Gv8vRsd08qJkFGqQ2kAqAyWHwONevTnkzFQOJCcD2S7rx/DXt\nl9yYQ+8oNX3B8ZAEWLdwxnYNM4i6c7P9Gbm/UygC4DF8SlKRjOf+KuOLaPaN\nki3sMmxzqUiDQv6VtMl8KlLKkzF50wmwqyK02ef59C5DIlzEtMli1w2c3cSv\nB7tNZ8HamJBkLyKYeTQqxYMXrUPM/E7PlIE1mdxFzW1LQaWjJbfJp38A5X79\nQi/99y6KdqMM4aCo83sNe/xND4MhhEA72/tPnyZ1EiNE2aQALf55u4q9BxZt\nMjkD\r\n=yh7h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlqILtBQIxrok+vGYcYmyw/ReJEYL58+Q6tsGG1Byf3AiBGAm7EQnEWbevabtkmjGH6UgfvwpvnKnZX5uwN2F6gyw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.c29a683d.0_1585084584246_0.1590857864920021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.fca3dd9d.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/ripple":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gkOKvGBSUKVzOBJjH4u0ZrnXSD8uY04LnUyFBAmYHz3ft8rNDtJ323QKD59LjVKszyAQxC5Y5DQaV3yem+L3vQ==","shasum":"5a1825ba8117af726ca2d9299ca0fcd27403fa6c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.fca3dd9d.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepr/CRA9TVsSAnZWagAAOgQQAJ3TxpctelPSX03E6IIK\nl9nXmYiRb5fvPPT3hDdhLBoerIGJgLWeDOCQFRBit3g/yHmEL4sdXYGn0fcr\nuCGi8D5FHqT5bDDhXTTNixRCLLR85l48bKmm1J/NTh4na8G9WjvfF1v4qXKw\nEvX/tDrXf+pSBmLwfMVo9N8NMeygPKAccfaJhjJqoY1d4SHkz99PR3dBbvOq\n6U0Zse35MtzLiKoDdn5oY+ywO1jSnHrLed580BSQSsraEc4JZiuiHy1fI93M\nCF4/m4wFFeq3MwWiao/L9syUjVspKZbTGDHFsxXfkzyRNHV+kGeiam/PWmAU\npxD6QTVeedi0SSoX1p/Ltq2aN5X3fgS5uMOOvJ3sJ1pGFbWFbUcj/AVpkas+\n9a0v8ccpK/aXbVA/3fwW+xVAHRsYmozEH3LDL3G6HqFZY97z7BdS/ZNqnDnR\nxSpa54L9IhqJvkoeolxdtouP48HK8R+UpD9HEtRJLZCO3zoKG/3uFnw8H+Os\nsYY7D03stycjHzVFzjlqL+aw9U35qsuZpuCQgvgTQ9gkCc8OlKD3jDSv3aHX\ncTgOKnYP0d7+7AMF6esuakAjUty3ZlT+sOuyUjpcpkQQFdbWd143wIoBp1D+\nIyhy9NHjK8l1d9dupwcdSIWf5HsCshMPkjgjCcRC27BCT2TSUqCPwmKLXK+s\nodRK\r\n=jVoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdSgNDU40rMRY52U5kwlmynlPw0bHrNPAUU5l/OLxpMAiA6stCp72Ntqd0FYdN82F9zv30av4QVqIwCeHVg7NM9kQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.fca3dd9d.0_1585093374745_0.8368277623609712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.1e73da49.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/ripple":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9O9Vgs1q7fVpPu/w7t5nwEDHtXq5M2QeoUOUAhjQL2+bD9+2xfvC7x3vsTrCr4sb0pI2e2TivQU8ktgSy/Vkxw==","shasum":"120c935c0a8aac5d2c675aafdcaf15235c3d82df","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.1e73da49.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81GCRA9TVsSAnZWagAAwgcQAIxW2QdSk5uYEQeksyO/\nKUU9KOQHj0BFZUYZbJ4wXF0Vwqj8bZYfxH4NEJU9v2R70FnXytl2YimeS05S\nHANQwRQe04v5n8W8/YbKf3pCGpV7TJBf1kV1ZInwRZt9YXPDLwSUdr3tEA/d\nb6gt1m0TW3Zyt6crYs9+wrIJi3zdim8vQ1KbOWyG/SnNk7iQw5nIftm/YOhz\n9lfMNPGMOR17QFUj6PO5+TsDZkN5wCcDoBLBgqU07Yo4QwzryEu8Letq/XDE\nfBT699iE9J/1utrtS6UDqKFnu22uDaMuiOYBy64N3+YTvXb1wTnBk6eWfEVi\n8E1+NDSnmg445uYC6FtnU8+c4TbKTw0tMSDbs9tSPJLTG3asiQUVMGWuoyBN\nitvDdExZf1KqpjfnpXbFR9v8w0Zsj5vW2QoK6GR9+zayxTEBUjwAlnIeAmYl\nbJ/CcwOg2OtYOUGGBdwBzMhTtftpDFEgAriNP2z1Z8nXL1rfvlJVxtEvWfKg\nEKJoGUZETTWLzlZ8HVwvQq/J66DwoNKOvxVovlWR/QR39cucyWbAYdBXt11D\nJeCA62UXxe+BxT9pyUGTK45PusyL82dMyZMOw80p71OgIv2861YWtCeo3rkP\nVk8z4ckEDos7ry3tggOCWf0ZSwd3YUXIH1qiV0yAscC5N4EeYzppz4dcCp6Q\n46CP\r\n=h2av\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfUIUdHcFFDzYrZemHlrzMoahqPaaRRYBK8hw+452tZAiAxHDJQg/8ojVosS2kv6atYUTijjmQJHix6G0HVodM0dA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.1e73da49.0_1585171782152_0.582382512538324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.bb6dfc5a.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/ripple":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JCwHxBfK+dSoZ0En/Xhc3CeQvvfnwfpde6wVBRhrw20dLIL1LpcFIVvCKvKv4X7326FakaYFlcKHmHHMhaEXhA==","shasum":"f5286e934d25327ec632e0cf93351db27f5b8b4c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVrCRA9TVsSAnZWagAAVRMP+waz0LTzv917NOZTF2Up\n07DQNqm4QsIHeLKk/W5HJOYYaU8Abeo3FivbhzWVC1D7Nf5FWSOI2RgP5Jg5\n4HEk8weJdfVjHBDtjT1w73ElwpS41E7QQUyNaYnc+cmJqxyiaMLgiJN4fioQ\nbt1p4G3+eHyQZRiVCfiI8/TEi7Dg7mzrYBOjLE3oUb5dpLxAuee6M/Jrb8vw\nqRebUJm4u5m6IoKeDboSv8KfuwZeSXEnoX0Cw6LOo/ogm9X4O7m8renzrJJw\nD4Rd4ANdKmdJpxhntnjJpc6ecbA6dFFNcrZh0JVSxtl6dmiiHn3Cai2zsewZ\njawSZhAXSRPfGBtnam/oJqwZnYhIuhggQdM+DXMQvcSL+n2UMuz9RDi1vgh9\nWyzelDe6SysYz7auARJgKuO2BhUpJsPRoUgnf6MioGio8OhQTBj64XnP7TdY\n7+s350xM05cPgKnO12yJetAqy5d/M9hUtBtgtiyJ219I0EKGVPX/ykaVvD+x\nribHrwvzioLA6flWVOsI7CnKY7+B4IkyFO+lzOD9QvmrXhfwFjq+cUSN9hzs\nECW8DRVC0ks7QvGI+9ss1GndRS2FlWX4Xe6UpVTLwBBff5v98V42dKD+LyuG\n5WwVsP3rcbP9+c6HKodW3uSu9Z4KZldW6/vDNO1MBvE8rGxH0Uj1hMRV4JEJ\niecC\r\n=PogP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkPfxsNRJW79hUvrfAwXafaFYUfuhaXrkXOJuK47p3RAIhAKPLCvewTPg66BUF9PYRhYegEZ7XphOojOEJ+ErmLrBo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.bb6dfc5a.0_1585272170696_0.08593318729023491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.1884603d.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/ripple":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-u2teqwM7kxfmvDlJmdBQuu4W8I2hg7aHZp57cq6DE+tJEV7HnjREN3X9WDdX8NQwVce15khIrnZ/I5G/w1j0DA==","shasum":"53a22bea78f4dcb51ad09bdfd6e756cfdd01920e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.1884603d.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflogCRA9TVsSAnZWagAAsDwP/1opB/C5iYbI+Z2v+hfg\nHxq+Z0VmIJaIcAXl4dX6vGM2YIpUvHIkwd2kEFF2+HsLOhICNp8JRRqQ/TXn\nJRqTPBCtZGGMYkBw/zKmWJd4EERRrt5aKO9Nsu1t6u61zbViRKzFLyrWyFue\nultjONqPDPgTO3wrT74nVqJXAqG3g3KOPCBuZXm/AGKYkwXnWGH/ws2Xaqw6\n6nOqdFB5weAYC7QKQF6H0FVs+w/PlzwG82CoTJMNOGlM5+Yiiertk/Y1+TUv\noXVI2n/jmgR9v7ASOGt6GrzXtd1M0qkUoe0D6D0E/0CBvPe5nDw0TtsIuiiK\nSXQ7Db6+nAcyBwG5P7JRAdfeS2O22J9AwcyIHT76DCZWjKwtoEn1wbF7oMEi\np/vXA25dNTYQ1unVw4iip3Rosl27xP7/eWUfnmJbtsqmB6sTwii0O8RqHxvc\nO+DSZefMz3l0tqj+Bs8TzuDWByjfme0/K0O+HIS85zNMF+bRwP10TtacFFVo\nd+aNID44m7LwjUbAOpiFXEBlyqwhwqjiikNwKENUcW6FrSS5OYnCa2Q1aDp4\nQbJESyXRTpxiExBfpxiJpZDNyzGHLsI4PaH01qSkgPvWFD+E3huyVMok4U5n\nuZuV+BSsapqLTy83dBMfIPW0K0RE6W7yYheSeTbs0irwROFfnMb36uLD/W/u\n64uh\r\n=kP8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbWla7YXzYPVQB5I3h1JoWlzWL2kqJ0v/dAxsmXQsyxAIgc9+YEBxQbdhnqx2sewmbM3fBm4x7ugs/4iAeg/ut4ow="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.1884603d.0_1585338911971_0.11722269374169891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.aff73cab.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/ripple":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eLoKo0Kyq/2FOMZIgufUJVi1GaCvJuz0na6wkY7P89amVJP0khpZClekuxHUxGE2X6v7coy1dSB7sJJ2QDANPQ==","shasum":"36b6470016b5269125216cbd65e9b196ae5b4940","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.aff73cab.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmygCRA9TVsSAnZWagAAiCwP/RfUd7ZpZU0QDmNP/Qh5\nUyWBABJlzAA7W9XUAC0Nzdd56TEJQPIGlDKX9BqX06I8UWeNUQOU2zfgRszf\nRYXlTBVqCO5Cy4+F6+GPykuPNjoGCJ31/b/8Q21QgkkXFTBjMfKam8srphPH\nQ+7TzRk5xphyBbiFI90q6YFcXPz8x1hW0eR/z6dbAqwbpXW+h5sea7e4gq5M\n7S3l9McCe1EqCG9/mwBEvMgs4QplksZN1ayJ6P24R6NK2wBMWNxlHqpbMNgt\no0fSGPsI3RiCIKSTUJOZGECaeSnhJUWKDeUBcAAtFUqTaGybW6rIWG/9ea6u\nKmeStihEZsf+Ir+vJgbeUVP9mBX33P0jUrnpe6T5pgLfgwUywZmpSvM7QTC5\nPsrJN4/jJlv6bhMTHMOJamyh6lkYomip/SjXMTbZDCeT46cfCry0kwrB6291\nIyURER+skYRhlIluzryQEutkwTWqadHKIxdkDvSAZjTznBFwmdRfXYYOriVx\nSzSlCqoow42WzIEhVy+BjywH76IDMONGMeqRzw2lNi5ke/bfB9jOkZW6dxc2\n2oPS6GL1IzIbfiNDuJHa14zzDd5KsN8dtX9Q7csIJUSsh7ak5QyULwxt3fC6\nsjUorRBNlu7ae0R5boca9JIJ+B8dDm0qpu2SUBxW+pHaRH1Nfm7vlMvXI3q4\n5qSH\r\n=4FHz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNHZQchiGBFSIRwKNKBFNs1OJkc1rUk7pBRKihTtlgIgIhAPQO9gyfcicWj6UdOQ8X01RC2Nmv8J5k08tnYcXnzlae"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.aff73cab.0_1585343648148_0.5935694592481355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.63168f61.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/ripple":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pXT/xKeIbOFazvxV3fUjY+E83iAOn1jbJE9Y7kp6O4wr38NOWSQMGA0HRIhTUNu32iRqedy3UQXsARKLRi7WnQ==","shasum":"09814f6d008ebdce5bf4dd51b629fe67561b31a0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.63168f61.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4f9CRA9TVsSAnZWagAAKC0QAKO5aWjAgjYlpjFSKaFg\nFJwMHb1nYW4BXW9lPQsFYYTETfQ7lmHoLPkzws4Lr3FxeckmGho46zHvknbp\nEWJPF8B57ogRdOvacZqwXEf62nTx/Deeu7QHV2B0CTVKFUuXRhpfa5MDmS7q\nvs4UKdl3J09WQvltrvzxBleAy+3EBWtaYQJrBHKFyFESsuF5Cn6n6+aE/is1\nGXO9FY7tlpovGHTHxg30Vuk9H14fUAkQZWjkbcItZL1dp/BFG4m9CkMuLenD\n9qRdBJtv0xsIbqYjllmapE0sjJi4qk5QWyvrPRN90wasZr6xnroP6UGV5fos\nSlyY1o79IEtQ1p+LoBJcFNd5M9PzKpWp3G3Uc7nvXB8ja5bNka726lARN4N7\nuv/xzBLkHBnKPSK87Fyk4DFlgFqyKBc+cW8BMo0Wmj1s5Kdvl+I/csRwztEC\nS6AjhCjhLGB68j6TAsIFaWkHhiV4ZX+qw7E7Moeol4CGovtExky9GoB1CMLM\nhUlvaKncZiYoY+dFvxn15GffNN7rsZgrpUspk6aDqYfrIQX8JRjdUx7gWgFU\nsTqhZ80bKO0GT334RgUcszDwBvTXCz+B5FUruifsLJbJgTytDwry/oFEk7TM\nHyDaNdATgAT4muIhXdfuy0DjhOwsFbzcLlE93aU/eRuGUFBjUx635c5+Zs4Y\ntvAU\r\n=sQ1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCnEycAszYZ8PK3tQxlFm2dcaQDCziMsKkJ5RKK2VeQwIhAOaxAOrWqgQFtjHyH278rwgR/uPZg3ZEMHXQqWbyuVRp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.63168f61.0_1585678332987_0.9318031453925582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.9fb79b3e.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/ripple":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-D7rqOfALe1KBqbmNJ5WdUxImMFQ0scxorNboALzU242pF2dLpu46C3/9MiB7B1zsVp/WCFI0B479cgNjON+7cg==","shasum":"44716a78a65c1e35df88ede966b38c24e3d8ae52","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9fb79b3e.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7P/CRA9TVsSAnZWagAA4XIP/AtRAZFGiKSC8+ey5iNG\nDiCvNopJbdrbPAhSchfGFJDP7aqv7VaKSSq6BuSO2u4mo7RvPkajY73SqJPK\nNcoTDhI3iTypQXD5x3CgssKpMhpTmZDQEU8eFcpteKfBdtqTyacVCcxj2P/Q\nwssLqucVf58a5Q6kT17+DGSoZWWvbn0NfeEoJIiaso35tdG1kwPz+QQpfws8\nCR9ho12KZbraYafTKb2BJ9tQ6zbiNZeDm5lZF+NFWtOF+mMhoql/nYR5kPf6\nR0fBylZLZaahuEb0pmnpvH+n6l2aCEGLQUnZo6kqdMmWgX2UtwNQMfwUopj0\nY+er85zgsOESRfdZRudA+DBlNc58RjVpR2O0ms4qljsBOlk0mHzigFryVV/h\naKVrS+7RScsQvUkf0XcGQUAXBRuY7DLLSUHFyq/B/0Gt9hSwQNq/sfi8hfwe\nRc99j1R5z1YnKMbhefvPEORu78ygxo/PYtxhUgeN/2sWMl1OxSIizEPr4K7h\ngBaWKtQEYrWAm6aMNhOLTbpUI3HuPVF0vyMFaEEdkGqDAy0gFukhFaupV7nW\nfp8wfdQ0UNpb9W4TLHbwm4XO+aHC8x+tdPlIwXLpWoFaHj8i+gQKD5osaBu6\nAeHer66BRoVwtNcaOn+LqZ50USAtWfqtMrfgd64pwcUNlXB+xJmLdsaXgpcA\nSahh\r\n=ECFS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjgeKwIu/QfbDEQXc5AZ8aXl4jBls1xQ2+fLjhGCZnFgIhAIfJIbTnAyRqkvq6Sd22Oo10vwVjL8G7Gfs5eoIHnDEJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9fb79b3e.0_1585689598830_0.15230629588153155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.9bd3e9e2.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/ripple":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aZWU6GMlDlgD+RX9mKKL1xvpcNFzbl17dDEY7FMl/VqRQjLQFopugXxy6dj5ZHkMVl5Ayki25zbVHCuqwaevbw==","shasum":"a248adab15635e3a0f8a23d4925fb98326c0c10a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":29,"unpackedSize":111093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90fCRA9TVsSAnZWagAAWqYP/A6QF7auC8oZIPvnhWQf\npm3eVC9g4osOrKIuyYWlsYFFhquF+wTyyO5Nc8YwWQpKVnNVG1YMMjv+CIL2\nGSH17k9/tIeeQGa5XC2Z9mWjYkM1aEspRxQfK9lQKzscNsa6VdVMOhr0yp7N\nIZfcFSm5CbPVsVZmD+1C1sHe3DlNE5SmVsvLKF4b1dwTQcBcch5Qsr6662VQ\nWp8lqO+j2xnCgtnoKg5bKyYfksKDtEXGu4aDeQNPL//SHBJDXul9+2ZLifFQ\n9xqcBRP9QQVVYtIZry1MgbrdTEhU5NUKJPhMto4SXl37SMaNu/eRlrsUysVy\ncysEqnrRVvwOq/6DtpsyZx9uFcjGGZYc/CBo99Xt6uEg8E6VGprFn2GN19e5\nmNHQ4hq/1LasJl7xCIgD7T/LEnixVkrKhpWG87DecsP23RjKGNd7p6g+5Fef\nwY5JsO20HabEfOicxiVeEL5c4L3KsT4DQbZWQ5KjmlrxtHireOZYXX9XqSi3\nfBGYYrMqmuNqcGRy9cFKEEmin4L9EwS0DiuV3Bae0ZDxbWo0mk8JE+cBbRce\nIp5ft1bcpzBoBfyyLJj9DS458wXtmLUeekSlyHWipSzM+uxueV5a0m2g94P+\n8mhnqj2/Nka7PabkHz6HrNeLrVncAcyovidcYm5xF5y1wn0LlQYJgfbLJaix\nQoSX\r\n=d+mH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2WyVayRYrPUyj7t0sijVtv2cxjI2EeVIoMXPlgTunGAiBWQrZOTAcJ4gBKOjj53JlAAFhuF0TLEeGod8I6zXadsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9bd3e9e2.0_1585700126625_0.9497681102750097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.072084ab.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/ripple":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-d2yyhTabDffULHC2hsMJDw4cW1XBp5AE+POQsr7+C9s4i+K+uHgqb+vS+46z691fDQFofxIjrRPz35adICBdzw==","shasum":"a1bf7dd6736cd73c7569c035bad15797d0b266e5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.072084ab.0.tgz","fileCount":29,"unpackedSize":111089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/gCRA9TVsSAnZWagAAvuEP/A8lHDa0KjiBlEW96Jec\neQsX14FwYZS0c/ZnicdnCINemxkha4WkV72p/w/7gnIqkR+6tT4J3t7LimtI\nWj2Vuie/5ZHIZUl+LWXqowwuDgYHjqb8vMFxNI8VjVCj6g3VpRlxAJ7U+xcg\nggOyak2a+dC17wI8Jky2ve3qYPGE5RUM3jO+Qy+DAxg08ihZ9Z3rQ74fAWfu\nSRiylKu549GZaY9g5cZo9QBQoa+sKlupa7189fl1eAuK5H1MTvmA62AY6BE3\n/7ijrSydokZQvHL324G9FM0vTehTSWmbnJdfee9BaLp0p9JFsdp/Xe+dDnsk\nldvHIuvDovZJzZ5FioSxPX4o/tGXUnZ0OyNXsuKs4mA86W2D3gedG8gknZ8W\nzhXcWum2QEux3fCkhWequH5CGB4xB+2EkCBmu7FC9qd4vCuOmKZBm4Ic4ekO\nJ7jGg2WvewC5pz0minFLiJGFB/+8BGIpFdtk9Ow0O7RN7yMoQvkT6bdJjHuI\n+M0Y66L9w85fPGfKUVafW0x8M+uQPc3GHLTLV+SUQ5MrYUJPe5qZmDVj0oEO\nbd4MA9WROG2oKZcH3ye5I4aErbMspwzp1IEo5GSlRuu8ysEjoMzbRVzOkQMu\nl/lfem5BFcPeKNHi6KbmtsxVTZMkWHuc4SgZtx4exWLcn1qxryj9hD/EBPOp\nUm9l\r\n=eHUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3wv2Vy0wOR8OPos2iUw1tlic+AYMPOjrU48uz0Q3KqwIhAMloBB/Ai3/9Tp+xTh4e8FKkqFE4VX7EyqKWZKW+8T5O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.072084ab.0_1585766368136_0.9932490744740647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.4dec04af.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/ripple":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0ob4LkD0HLepol5hhWBva4A1WpaO1x4F/CW65i9Hb+FK2BPrCoeOW5fCuTOyFKa9NfKA69zK95XWVTnQPzmNCw==","shasum":"196ce5d87c6a8dfcaeb8cbaa404ce696d3497c08","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.4dec04af.0.tgz","fileCount":29,"unpackedSize":111446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ynCRA9TVsSAnZWagAAdZUP/3vPHBqYuJJtU2W9O5wv\nnwPpLIP9BdpN/DVSGxMwvmetcZgs6V7gyIkHBhnctrIuUVdKE/PYitO8ZYVD\nR1cYDCBxOromd15kkglf9Jux/dnLw4ZH5mcCCACTOJniDTLG2PnlVCPU/nyD\nK4XFc9wSOJltZtq9KTT2h9lSr+gkLa9JEaEz1fuUz+L1izAXlhPXWPaFSViG\n8ojSRIqJCutZrad/LXMP8SiUPbQLSdy864fzbKGC/oj02x0SFdotyV735ruj\nwNxUcnDgk9O1BxMMOe4xNhXvasX09SqkfgwH3ed9qgeAhTiLTKQX4VVymNdG\n6ge6lZS9HWPtzNRdITOhELGf0IWuJlb2kCEAiiYd37cnPClPUJCfjHT3PcsF\nuyq7TwKPupkhZXqVvr2/wo08ISksNgk89HX/jvGZ/qUnXQw+FhUXor9oqBzp\nH6Ld7P2t3pOih7A4fWjnolCYtVz06s58OjS1jKv6hCz3JuV9yN6JvoePvK+B\nKMiW0sPSlEAp7MOGAZhSQIZQ6RmTz5/S1Wh+9nhuFcwXudKiNJUbguSinOF9\nOUAL8pB6+qaCrASISJrN8RZhH1XzG0ltHqYQHkcn+KH3yDBzfR0utJ9liUIH\nBJNgE/ovDQRlhTrPlOeIHnWP0TWbwewkHL//bLftYLAV8cuvJVlmbnvlaO+C\nMnqd\r\n=4fH5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxw/Gr3OaqNkGE93XsClnIykYs+/0P4IoGxMMa7Z9UnAiAOP4dSIR0QnMNfZhIegp5dvQ2PY0uX2K4JEWH089WRmA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.4dec04af.0_1585945766596_0.2272536563768226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.9b676354.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/ripple":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8GKsSxbjnZsD7kGMOfXTIS0PWbS4A5klv3HlRZ56SlYM9zb+aNX5taeJ7c3V7u0zl4IHyuNpA56/DkP/j2G1Vw==","shasum":"ede6ec90c96df7b03f6e0766113b32e5641dc1bc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9b676354.0.tgz","fileCount":29,"unpackedSize":111446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y6CRA9TVsSAnZWagAApxEP/0Vpeqv9EXIVuhrZ+oj0\n4fP9aRsYRDmbrMBFLwJNtnqLTKvsP1pAEugXtSresCwyExz/YRGDU7d+RZPy\nPiADZAuLeBJqv8jIxEf8/rbo0UIh6Z2TZv6C9tpbnWGfS5hfg5g5qWjMcKaz\n1FFNTRYcXq+Tl3f6SVfUBIQBjyAfmtj6fUdxAd2Nek+FnPyWd0MLMvLUPhmc\n4iSYVgL9dQczA6fdphq0n0W7PdIUXqr6PDovFP846KP290KObROgF+Nbf81y\nzUZoQJKGtCs+ojsgXvVn/ze+1DN9S/r8sbKebZy0sqR5DKWrYzuqGYLGAkVh\nRw9ZeiL0Ts/UzMQy/ArRGyMFbtqTCDmqTP5XTtt3yGR3ccY9v/JYE8kH7mMe\nZVH7o/rt5SR/228iamTiT8EpUfBfQz4lrMQlQYv49aPDtBNIvJGDLEzIx5S8\nPJEG76ZVtqiodI/lT60PNumC8QMoL/MO+xJeAipG0rBzplb+akCC9prv4L27\nKmVpS5hGeNU24I5JOdSxjrAq+nwgL9qTj/hSLQ2ctkddLdGC7l6mCIHkiCVh\n/ccR+8Z8FGJu+O44cUqpikBve4hmGpehHESOVDgf6oRctCyhev074nTKWjnX\nG5iroH27TPF+vjXfPYv4V2VWsTHsy6M6N2/gFiK+W7HMtml+OSy9G2I7w76+\nFeII\r\n=w+PG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt/bjYrwCiqEIatHMh7tuUkLwqzLDr2tCKvo/WHnYNwAIhAMAIDv2ZZ+UTjY2lJJkBW/PP6/I7Rxw4sG2okR6OxU+c"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9b676354.0_1585945786322_0.07768204269622725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.6b946095.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/ripple":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qofminXuJidW0lnWqUoOopIRSkAmRy7iaPGdCeFtVFNBIXBL0OlsS6zr1Iq2x55rsUPzlc0W0w3nC4QFtTsa0g==","shasum":"ecb3704cc579cd86e66bdbd8a9cec51884a631f9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.6b946095.0.tgz","fileCount":29,"unpackedSize":111446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6ltCRA9TVsSAnZWagAAz/UQAIHoZ41/vCmJAsyTREjo\nfFrEhpGsMXWdl+soyVRJAhbbjnFJnNAgldTlxLnRbBnuaNCaVlRI68K7ydL4\n/JpVoCLElIIZzKh1AU6+ekKkYAoafziz6h/W+IlloWnOo5HSP4BmIU70KT3n\n2hhhjbtRSBRSW3faOpp9i87Ha+qnNKF2C6dHWOyWE/XGAUzf8tQtFQ5QaH9Q\nISsFX0AyGwSgOxhwA7z3S5GYOunhYK2rusnC2VG14n1xrCjUcWlP6Aupx2Gk\nFXaHpedFq20BSCHXP1+jCbEA8O38cD5Huqr7xtlAYenzA4ZGgorYnMLfbLpn\nzv5nSSNdLOKrpCaCEP0u++JPBzxbQT792b8s57HfR1BlwC2/KACuAfX092Lx\npXP28LqItH2Mnsnx63xEHd2aGfBRw9MT/gTJoKlXF1qLxtOnQJAdvlxCjmG0\ncUjCQfMt/GWDG8eUbgfBa6GJgFo7H31fBbvYpqWLIczjrenxu5/b11QkgwUG\nqnFzrQGeIJOhB1/ZggtwlgY/mfHXDlYOFjsD4B0f5v8GK466L/ke1WKE0QjX\nFvCITAwBXrVmBtrl1R3C+zJ7eXzBQxA+oQQN2mxYOwxyqpQKHT2a22JOvnDW\nUUieE+KzwKRbEhzmkcg0Hm106evlakQ8fgv8MrJQe1XwYb2HPg3ufSCnWgFj\n4218\r\n=jwQs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTlg3RP96dH1fIFwPC1670zb+WCg71+zCPKIpXvlng3AiEAhRryKOFpViAjY/Gu1M51WptZgB9/wQYqoDmiPE0EQFE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.6b946095.0_1585949036683_0.07604120836418704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.5ccbfaa2.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/ripple":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-k7aKWlrhufDLt14brJ6U1h6udo2xVbONh3e2dDB/F6eDsAEHefXmF7pIl5lalZmgYzDkmLpp56AqD7Wx2eyaGQ==","shasum":"b6e67d09561eab69340c18c86f94f7b0047a84ad","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":29,"unpackedSize":111450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6q1CRA9TVsSAnZWagAA6bAP/1XP6i1gJFlKZZbj6SvS\n/e+D0DDlD7Kdcf3dRDFrxvlJk4cErZXkYF9nnHslBeZC4f3Ff0UniaCeeo71\nrqjmXJ2pZvcWVqomaamv6AdkRWjrj3xvmYcVqdxMBgzkZ6ECXo68FJmXlOwD\nOz83V/hwz/UNWgjdT2UK/8ZI+KotF5YfseScr4wMbLPQavnVXpUN4g2gBGNY\nlBeMyj8vVsxKDvPAsGSJmAPyQSTCMc0JfQpIqQL+TxfkLxAoKXuxP4C8cTJ9\nxdsM6o35dsCqbp6hjBwIITL1Kn3P5ygVYN4Qv8IhLh8HR2cRTzB8oqN4n4Pj\n11ynOyXcp0vDBZ0Ut3uvwm1lJgIbNo2EM1eY0jUkUT/ER008LUDKpomSZc+Q\nxMbpUzH0qA2UlqvOxDC5IB4gcumqvPadSuBD0zwkdNknyOgixGEK7E0jdF5M\nA3Z2naXmTPbQfrkShs4xRujUNWlzvTX34qNnbvUBA60jOx7XTEAysDRNcUqZ\njrXQUG/NIpdf6MAz2FqOZeb1zd04HRTKwGbyOwIbwzKTojNcqfHbvq1wkDRq\nLndY/kyoH8Hdk49EsXY9byBxCNVdJt+FeYKD/VPsBwzsaB0m42c/djPYWNEM\nMPsBmYliyUo2mAW471IO8TSjQIOSsd4LjH95iWT6JZ793fe7uR2Jn3Eeu+uq\nvd8Y\r\n=hgY9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcWIoPL0gJYeSa7mNMwWYiBUAN68o7Gipa2XO2V3SadAiBGECNd59lAWGgMRqtMgG0fv/TB9eLtZ11tMC9o+sn4DQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.5ccbfaa2.0_1585949365158_0.7139985535825712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.a0ab8772.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/ripple":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ru5NdHJMIEUe46BLEvR7fAKx9uRj9ibeLjtfKgGLEiTinMouivCaFWKPsi8its44dRN7RrcGmf7iG5t9C05fUQ==","shasum":"ded324b9b3e5e81581f3f6ee05d101cea3c347a2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.a0ab8772.0.tgz","fileCount":29,"unpackedSize":111450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3GCRA9TVsSAnZWagAAV9YP/3lhwLy05d6QMUMXHZoh\n+dtrXrN8ylxDza67/6eh3x0S8kXAWwXQH0tQqVylkBYElKwaPJtjIl8GxF3v\nq4jCtCoWPBqYDbtOjqTQd8RazOLKArRMis5aqVP78RxHQcstY0/K5C0VrW0c\nrOeB0Cmthtr3qPRxFA/vMyCQEUnweenMXDwl7vHE+CWX2+RQ7+BUWn6Xoq9i\nOUYREV81qT7zoL7nUQJFFyQCMtbm07mfOSzKzYRqNiqtRqkzP9hm97Opj89i\n7T1IcgbmIvnOtqQrny65D0gFZF7b3N9iLKvTAR7Kkwel+FPlwoUGSgubpSoM\nUy0L/jUNaGXIrpPF96p4mj0KPjNIJ47dDXMs/UAOJef2WcqHJQM+dvxR88TP\neEYmVfE07F5LrytXw7K3p764KxyiEAukFqZcPIZUZVX8dvnVuEWH+YD9hWn1\nqc9iWaWGwsh65chIyqqxUExvpbKAhDZ7SxDsVG8KYOpiDjPf1GZSp9vJYOmH\n8nNsZmckJgKB+wGUfDMKqDCDNccd/fbpTODp3Q4ABeF4Yznc8PHk/utA+BGF\nb80kN54G09qH+TuzliZP+pKAl6G2kYcKtXepr/u06JBTa4lOSTv0Z5uIRHGs\nZ9jB7OREc0B5UdAiI8PEgC7Vz18bSBgIShKvWHfadvoWhBETMBHVi8pdoo+m\nn/i1\r\n=uM2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNDApAn6Os+nK5G6UibMy2MIKeSbod46HxVSpGwv9ghQIhAK0HO+WihxM0vO+BbuYPMq1gMaxG5Ok/E5mxVlcfA5fi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.a0ab8772.0_1586290118039_0.8420395679566481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.8d352305.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/ripple":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gbNLLP2Itb9Fxxd6sbx8ZlqceOyUPZUnHkPMUXtNGYQ4TUB++ff8DMwDRZzc55BepSY3U7Cxk8aGuQ+RUgxYuA==","shasum":"ab31641ea53e6c5e7abc6d14076660c3e46e874b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.8d352305.0.tgz","fileCount":29,"unpackedSize":111450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPORCRA9TVsSAnZWagAAtcUP+wQABPDu74asdjWrowCn\nqYs6QNynF46XCixmp8+T9RMps8kvnanxM6z3krZqP0VlFCeq9fn5nFtHRRND\nJeuM+LGTCngK+AAXnti0NL03I4yErG5+32c1vNiHqZxS34+nDIscQTQiwRIz\nUjrVa45KQwesb281r28P1bPgAoiIMDh7O7FikZvHgFM5IxS9eGQUdumQ8Vt+\ntWVIyik0KIhl0XxAHOMPxGRa/P5/fVAlQmp/C8E7d4hV/3jjWA3/2oS0gY3Z\nW1nHh3d/16siHwlbqSUH9uvAKBadxhVU1CVp2Otw/hVvB7dLUJlqi5xfJqrQ\nlDiDlPQOWUKoFgG2bWEB7PVw7G4ANljlMQ4hzY48PqdbJ723oRhn5C5lzXVC\ns2t5mhbW/ZLC3NJ95vV2Qgh2rsAq19CO3ibpGqzpKcktPUy+XSMbA7k1B0Pi\nCKnDftUgVb1fUvh5kreK3Q9JoM4x4lZebU6YAyTWyDTiMBJzmv3BlPQPXpft\nwzUcJtlLdJIG0PMYP4jKaLn3tE3EzA80OpIbKqNsGG0V/PLUyig6KAMo0Fw3\n1Jq+LpzvlvWNeVQ2hOyHG4hMkt0r8A+fSXJ4BjsGGxiUcCbfbf8Jp+dre8/b\n1QKZ0DwdrycLw8XlqfKnz6OSZGpuFx0Gg586I3Ii7fjCyRM0JG+9Kxy9qs+g\nwqpC\r\n=S13A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvxNKLO37wGdrAoNCGsuFqZVD9jZnJZwdijUup284kxAIgJ2ZvMh9rLktWW3qXCAryUdVuzKZdutthe0E9QV5QkuM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.8d352305.0_1586295696902_0.7876093348181452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-ripple","version":"0.15.0-canary.31eac79f.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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/ripple":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# mwc-ripple\n\n> :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 us to bring the most correct and optimal implementation of Material components to the widest possible audiences. Visible progress may be slow, as this research is across teams and repositories so is not consistently reflected in commits to this codebase. :warning:\n\nA [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)\n\n## Getting started\n\n * The easiest way to try out mwc-ripple is to use one of these online tools:\n\n    * Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)\n\n    * Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),\n    [CodePen](https://codepen.io/azakus/pen/deZLja).\n\n* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).\n\n* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.\n\n  1. Ensure the webcomponents polyfills are included in your HTML page\n\n      - Install webcomponents polyfills\n\n          ```npm i @webcomponents/webcomponentsjs```\n\n      - Add webcomponents polyfills to your HTML page\n\n          ```<script src=\"@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>```\n\n  1. Add mwc-ripple to your project:\n\n      ```npm i @material/mwc-ripple```\n\n  1. Import the mwc-ripple definition into your HTML page:\n\n      ```<script type=\"module\" src=\"@material/mwc-ripple/index.js\"></script>```\n\n      Or into your module script:\n\n      ```import {Ripple} from \"@material/mwc-ripple\"```\n\n  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):\n\n      ```<mwc-ripple></mwc-ripple>```\n\n  1. Install the Polymer CLI:\n\n      ```npm i -g polymer-cli```\n\n  1. Run the development server and open a browser pointing to its URL:\n\n      ```polymer serve```\n\n  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.\n  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.\n  >\n  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.\n\n  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.\n\n## Supported Browsers\n\nThe last 2 versions of all modern browsers are supported, including\nChrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ri0tsQdAqgpOuXtYOUjBY82YCVWue8bweQqc74W3AfmHlLujXU00GBANv/VwMR36ulr/NpmCyEru2GM/1sjioA==","shasum":"61ad7f1aa39af3df52dd268153c112cd018723c6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.31eac79f.0.tgz","fileCount":29,"unpackedSize":111450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPc4CRA9TVsSAnZWagAA1pUQAINzhfwYmAphiujt2DtR\nTM+x9WoWSdH+hKSfn9Rt6kRqHeqrtmOm8q/LV4J5sSp+5LhSIbhVjfP+jVBk\n3SDmUJwGjBgLV81VW5+MGE3KE+boZO3sajmHgUOuAi3jq5cA5LrFYywWeUbu\ngo7JRIQRNj9lwl7WXMt3lpP7FS22fNoja2C7/W/d6nsQ+Fn3+X2bfZlnemjI\npTvp816UiMM5C0uPvc/42h5RhjaeEFGxm1DpRN13nQqS4jceCq7Ro1wsIWd4\ns9a/niMPTGSvAug4jZHf0xyXHkiUj2c0o5fSr1cH6CF+2/dd6XtCsw1TN1TC\nUGSfS/vMe18Uumml2FDsHZPxeWwMzbcS0kx+8MN44q7xjqzo0supA81Duo+y\nH9eY7KA9Hd1eBE7vapyfSyTQxBHXLWyESzJjTkzP4NZaSoUMNl3Oz8n+5+m0\n/luCP2NvFt+5EzRBVHxuOddpT2oIpsQ+RJ42vljRvDZhEHJUIIbGhJED3S38\nfi1EMkTMTQkh6hYf3Ub6XBJuRw7QEPrhbva3RhplWoshuUsjnGa1E5oAlRQX\n1AITbpOQBplqmSMIVVnt+K7SgsOa8voqqryu7BdZ7mU5jnwkRs3ySzfVYblQ\nFSRtaFDiwcvVbI+VHdjcHcdTYqkX/u55lF1JbQ+57Vs0PhEKPwaRof37vEm2\nUFQx\r\n=SMJ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiXfyOpp/hYYitjL93xb/Fjxebjk9+kIJiEsKQ7Is7nAiEAz7F/8o9Pcxh/Lg6CLPHanGdJYPsVKOP1KLpNDua20n0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.31eac79f.0_1586296631911_0.8152052402339227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/ripple":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-pC+mWBCQ4+VvvcCKE7AorWAPCCOuntyRrhjgT9w/NHL7cjsdMAdezYEPC8gJD6I4iTFVOzzTCdV6M6IKFJC0LA==","shasum":"f890aaef5e7d549a4aec8e3827939d8ddcd36339","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.ba05565e.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqgCRA9TVsSAnZWagAA6r0P/1vq8mk3AG7n4Z2Dd2oC\n4t9V9hO0+PPaIAa7rWn8DQLK3z4KCrcnmgFO+bS9FRQ7TiuwxyDjLIjIKUFB\nZVTANifF0dcq+oHGoQcfNWP+Hd6woVV5swmCBKRIawnXRaaw57gi/8+2B+kF\nPWWPIeImOBNOZ9pQjJx1+KEIeJPeqJ2h+HLzFpF/qa2B+Rv/ixtf5SFMIhYr\nX7HEKNpUU/AXt/+YEpqhS6yhhw31sgWkevqHlFwa2XsIKdmiEyEiaPO7oHPj\nVWNlgg77wGv6jyPiLLW0IiNdDy8uMDjunyKQbrhz+gtwK0hkbFa1myGhos87\ntgNMiCGk/NOsRmpQtQBSMtUY7dQspYeg4D3B2lHWEA2hnEJClvZIX36+lTKN\nWcgOWAKRhorKcq/MLYLeUAGzrCxDC5BtY2AZjRF8lfQs3exaQ+OS3lhzUTGt\nDilk/9DoG60qfNAyFn9uflpE4DY11ugtxKT+X8v7YJTG93yrkaNfixRcV8Cd\nNqTZtCqoULabeBa5eJeUJcFGqSfGpzE1j1f6Drk760i6iKK2+uigD7Juhl9l\nmNdTXjWC48xHlnnuM+cUjsuXH9ZDYdh1Y/1OWrqLPxAizCpXYgsTPM8LRXcJ\nqHEYA0Mw4XIrL9lvqT+BZ9LYQwNqx1lkNAock4THdzkw8wmmHj4RxzLwNDCz\nXIqd\r\n=3+ED\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7eqRgnLL4z7XSyAHUcB0auY69tcucwgqpMZ59ADqFIAiEApuiD4gL90rWNOfON3wfrmegyqTLG9v1zcD8ezFM0BDA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.ba05565e.0_1586367135812_0.16982609042960517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/ripple":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ix1OJB2O5rhuTvVDjthzU20kqGrKRGLldjEA0GWbshbxwFGO11kxJhTobDqzSsmwui1U1exJ/8ARv8eOHaxHtg==","shasum":"76525b4f2d69b8637199447b0591a79d4d821547","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.25099f79.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJ1CRA9TVsSAnZWagAA+GsP/jSMNm66Quuy+lIqQg+R\njl7/sGlvzi3jcyrwhfE9O4W1onRNCHudGSrE8oTXdpFJzaCQI4AZ7jUIXyrs\nXPksVYq7spsEncU1Uh5n2iY8TG1cpNnyTMxQaWSw/08kbEw0+r1bM6lfISWJ\n9hY2TKm//qvul9YSOlO1b2lOBMfyJp1t2HgVfCYKnZ6jQgGmmTPF1tBlfEQb\nmcjf4f3KSpeP3WlIpVcluAY4ir3/JNH7HEEtYbszYd96Hu+Erw3IEJJVUf9N\nHPUNCo3Do5SHEaTsleCvT5l0RadQiDhwlKErgxERpKe3DLm0+6DGQWafmZK2\nHtzXpJfh3DaO2JB4SjJ0GDHd0RUrPynGNuWGfuAt3y5VyEi5EiNOlonVsUTf\nvUGfiZFcCxsWwOC5EzgsogN8SaVVOt1rq/uwwP7+UFb1chFLJ0E3lIljfYSu\neOTO5OsPoQqDYm674QYhCI4O3/yrwWaiGJtuigl0ztc37m8iBSvLLLAxgNtl\nvrUmT0H+z/W3wkRuRvjTEp21g/gIvvPlOdCdL7Q4R4YLvLVzr4P+qM2EwiVq\nkEQSUFrBo4EKr+WJ4QRBUZMNmB0gxx2ZDN5LH7T6+kEBwZW4YxYVbQDsQjYn\n30XNe2XAPbBq70L/x8qN2JbsvfwTDKbZb2u4HFW1sIQAQ9ul2mbKjGc+edRP\noW7Z\r\n=rmCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUiAtE7EfNqRFPnK3s45EwU0XlisLlZQzo6VcmjdO3hgIhAJzqa3tZLj78vHbX9zPf4g0ApMxMSEBB2TnlvytBUnbB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.25099f79.0_1586381429125_0.5546581433562985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/ripple":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-u6WTxRzB4tBq7MJV0XoOt+btACamoQp0kDSUkmhBhgnw0IamM2O1qzEoMQOcNeAk1GNfQo4s/kAb4izJcgnfHg==","shasum":"43b62f84f9750ec5899d63a9b11bf995bcf699b4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.447e31c6.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndeCRA9TVsSAnZWagAA5H4P/2fsMdr4HqZTH7S8eS1f\ng7OcXFlSvLzzZY1S1drsbF3HGXTLEJANjixL2PGBHX/1+8wFt+3pl0Ku1oZn\nYXidaO+pQGRG+4qd/YIrapl0woXARdiZ0IH8H2KsMN98+eu7WOR+EIOgPT04\nacIyoak4ZeJQk9n96XqELc+4Quq7p23T7/ZVlg0O2k0+v8x5vFHdqhypIUds\ns9lfqFuo9BRCZNVVPHJV4pxVCE1rAUXnteFNPKxOYeR5X+q2GR5Asztt9x1n\nT1aVY9U4hGhxdWxJbvMNEx6yqYsMxJ1UOvf2bU/NAALbUpMApIL7cqSPCY7I\n55pNJ7g3TW7PWDwu0ennGseEaT7aMbPkeLr8hA8Gxu8ZavRGzHAWWC5ZMPVb\ndJTLjRirvS2uuS+hVQMvwmE8r3iMTsQ+B9Ykd5qEaTxyKkAXniZaHcKpH/TS\nA0xhUY7779+rficDZrMRfCf6Y1C5DJzfbnAuo9o+ZPnuah5M4KkVeTzpumtB\nRL/k3XCoqBGmibupWJkcKPgt3JYXkkgE97UOSTZ7vP5Osm1FPGsnauCUUqU8\nVs0rnfRFzDPUhtzXIpjNctRUpxHRRAO23wgApcyfUPaWsPs5JBQ9x8muNyR7\n0CQfF7KwQ3QIJWfNO8oyx5DdX4MV4DDlZREK2sf1KyBP3Fiwc1fE2kz7rTg5\n/kfQ\r\n=/RrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7Wppti9NS3VUGe+JrKE9ewJk+IzGw93NX1ZnX2Dai0AiBig5hltovwmWDfnmkWJeDxjPCT4G4+udbz8tOh5JpgZA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.447e31c6.0_1586394974230_0.911144588392454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/ripple":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-TzEbdE6fmg32Wssqj909WImLiAz6FYcqDZ8iAJtAHNG+CUil/W6mnc0Zw0sYOMQeZ+XypfWAc4AWY0cEYBTilA==","shasum":"50ade2b29ceb37ff07933b1c163b70442f7c7b7f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.d6dd84f7.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlmCRA9TVsSAnZWagAACzYQAITQ1KTBEoXuJYBFzuAI\nCb2NjSaHZSN4dwlwxnnjEeUJ2pkWXxd6oi89CW/ZHSYsVSUkNd59a7NfCD8J\nwVQK1O+jmrTinkkPYI1qcL28NAwPrDHpuFlFS3AQQoPsmsOTDgE72/r4RmRL\nj/ZdA8uG76T9drqcxtJgYj2lp8jnfknTm5GsbYjAZy1sa1BBWMPHsMR1Y2CI\nliaZcNWZ0kQtzWQiaOCt34rzVPlJ0Myd3PBeUxofMijUolytvf6WWY3B+73a\nthZGGdrfKlaNOIJftGM9HDSfUCBX/zoteNhs+DaL6l7wVz6C+IPhbe7A2bbH\n+dyqBJFJysghuLKMbD3Q8zqPob3TSThaMsTBKiYn4Pe4pXrzctkcY2bFtk2b\nrOrpAySjdByq+KpFjStaiPGgWk9y4zn3SabFRMgWtS36SEE5Gp/KFcr+o0/3\nPXSErJDf/WlK/D7ITd5RFJJLMKMlQcydTsxtdfEqIYRk5lE3aw3AIPivM2NV\ngFoljNDlB+jU7mxu0nrklsdKjz8pf1V5ql2xh0y/YNWlNYbmo2UYotJsKLF6\nIWAag7pVVk101i+5J+P/ToFDnZrtmtrPFh4i4Lzxr8x8dhApsmMZ2HppJIu2\n1IbdY9lxDIy8PvlUQHdc1W+K8tIImX+JJmtf6Gau+mdUK6RCQnM3dyL+cl8f\no0ae\r\n=hrBa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoeCjqIVoFsZIQW6PAJIf7Ir8URTv80ITejkav4JHAEgIgVbBn7+b6CQt5AhaNX4/vlJJ904/xSxUgUt59wlW7ueY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.d6dd84f7.0_1586395493663_0.2656012279315896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/ripple":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-nEiOIL4jXIhgfOY/J5AqE8Y2/ckl+rTfRxUJ+W1v4h2YZJ1kMAm6adgQIIHeDZ8zHlxjI2oDlYi4gdG+bweZ6w==","shasum":"a6f6d92400cca49154bc703c91add04cd9e53b8c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9b03ee68.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39eCRA9TVsSAnZWagAAO8AP/RB11jO3HSMwXKx+Df0G\naPhg1x/ughqEVwwvc8HIb1D77E4hWxkwzyTCRjTCFTohjKWl1ZAxbT+bnOyz\nOzJGaD4CXcDCxt7IXp+SBEJpEu9XshRmARtDYnP1qXLFlcstOjdAa1QWdORo\ntzTwSi9qZp0sUh/E0fC1UOwYWPHrT4rhButw7MZFlJJYR8chmf2n/kKDbn8Q\nL9YxtuAyigxpfoqTvalKQUJDASE+gbgL4FpSbepziCi53/JJ5iYVpTylJSvj\nUMCg/VdBG+BlV2jNHR1INSn40LgtPxhLVmzZ1RPIbvgjgiodmqO7ciiY0tEk\nQy0ww1iNOTfwr+o/mtnE6ZTNf1qI1pYq/6ZKc363ihJaT2NHGfindsccRjKP\n3zE1y/VG4JhZlS2SNld9aKPdvVVFafhrbIVAFdCTQynUgaFJD7GxSTWXrTvE\nX78UKQj3ORm1CVEUVRDfiOwIrz4TU6rr33dngstaSB58FfKAqa1WKYGT95dp\nyHT6s8hAHpRJ9Vln/NG82/BPJz9CL+3+DPM0piktfHUwRbvDfXgvykZKcQGd\n1z4kj7fx7dTNqwYeEM/36+UsK0OKYGr8TJpDQfCLVoVAoGXwX3GeXiLjeelX\nnP5o4Zhn4FiWHRcA0ubMAfmBmEKubSJMtBJMnC/M8utoP0Cg+N3c2EzrnvYz\nB5hJ\r\n=uyGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfS5c4rkBfrbdhuHFf0vP2wypNUMYK1RcJCOU9TpOq+wIhAOsRG5TnPWmCOXXcxbK3fn8j7MuaEMl0qRSO0RMyS3pf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9b03ee68.0_1586462558415_0.1569816878055288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/ripple":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-KqqVZHtF6NCl3L5wd0yyh6Y+tIanezDDAm18CK8MgGCY5Iq3h67tvkDdGMuQ3dCB89YjIe8FKUS+7QAv2Q7naw==","shasum":"65f93950f7ca3c836b0e600c6a68b972163c8080","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.bbc25b10.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPb9CRA9TVsSAnZWagAAhPIP/R5IZ2uSTIT/HOjAKFY/\nmcYJ+NLe3fleVnUJp0usWlT+XaGF9rY662mbLjK8tk7CDRZnP0/TJZlQmLzj\ngCn5b47OywD8C/xNccWwkX7HckDnzJznf4EgxiHEzxwR+xVJyBIAyyKLyVJd\n9hdhIKPqkF8wKArAXN5dPrBKNopSL0z2oGsLHrbZMmjYiQDrnFbnXoKaJjQb\nlnqE3hvHlIp2kyBZxdyX8odl6fhUarj1ALBvVq45bUmqEV8rjp7iK/Yd66J/\nsBNRVv2g/UXwyMMYJ3lYxd4EaNhbk46W+4f3JAiy+xPV1FWdFaPCTap5zt2d\nAOajrpExabxTX5j1h0wQxxMKFuN5MoHntW+vxY3DmBsh7QxZPwiak4O+jdmg\nNlm7urz5IVhqdIkisVoehKz8UQvt2TA5ZcWSI7FDMzfgujm2oHp/BCxOZPrD\nmOHlA/1wplmvNyXD2defkMVBAMTfq4VNItBFkEkCj6PDgyy57Lq1cTSTf1lU\nBCABYomiDatx/Pnpp7rcQsxIc1zaSiy2pdcFe+p/it33E7Ez1nXIb90Pj6+h\nOYQiBxH84z2WiM2OkDMckPwl22Kk3xOqMY0Ss5+TpeOlsWenbMfYHVaaQ8mi\ntVR8VAUypLPVLEyVEIatXYCKgHCb0cE9FR7vJZscRtB2UWu6AtuH+lJlyilR\nQye3\r\n=IVXB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD4xwAXd4xvIdyIvzuoG00PlniVZ4ZtEr3TaIWzr0eCAiAoOMNDrnUAkggzaS0UoLJ7g88sRD4/CMSTC1xD75PqRQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.bbc25b10.0_1586558717507_0.8212793847381745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/ripple":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Lum8IHcSCOWfjNcG0An7H2C9dC2lQKGPMe8PIUFHUigAAQJX1IV88/CTkMnRSEY+u5J9nz6zLFiTZdxnnVI2TA==","shasum":"bf8a4a2e880f6013625d8220b11f2d1a9d5b1149","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.339cbfd4.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aTCRA9TVsSAnZWagAAEYkP/222Ec7bKbJf2F4U6IyB\nmL/3LsmYM4fu7MbrGL7j5xmk2VD01lBq2f1GRujmPTWPeciOfyQgMrI0sgQy\nXpDi3mZweNPe+fIU8KV3ky4ekvXwTJyhhY3ryf6ptH2Vs92HavCSQZcV6G52\nqvAzBuDxIbCoy/9HbnqcTENxrZpGGSnecZZCxG+iTh5ILHHcAkY86BrSmzZK\ndQW/z10/IQrzknnZ+QpbCKdvKXGKKuOLU+pSVieyck4Un9G/fLBn2wXnbDUZ\nGulZTU2O6h8GqskCx/qVuqQwe1P43oM8LPbP2pHQucwdPXOsCyPvYBonJxr2\nB8UQWy5oROcQ9CIQn25/ZosU9g/jlWHjTg+lHBTjbB01Y+f9XQ4DzqIMIOYD\nOaSIRnX09XSPF95YCeTln8rhjKr+CJSt5RyNjmNcQ+WZ4wO3ZXcUHaogD4cb\n0XDi8RLMZMnthSPJJSLLhfiNP9m11R14e7V72LiX+WkzJdwAOmpx+VyCC2im\npO+6AsmMcNrt2qgCH+4QcGNjcZ3GybLipl9rcP7YwgmqrWYDVKyTmaHzEolX\nz321DszAHGxiaaIu2dC4C5GSZJ+t6fN+gwtWCWgx++SK9f5vPI0RMUFLgZdi\nxNuCwpNQODDGrH1b7wrvIsXxatgbZ4U5E/rmAo3cgQLUvLMXjNaRnKuqCcnd\n0WGh\r\n=5mSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEkk3HIPVAkXs7BoJhcqjjttUf5c9d00CUgkuhXbOvgAIgLRYHuGnl7AnZmJ3+4fdL2mFVeOWULJSjz2zy+YlxxUc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.339cbfd4.0_1586972306551_0.5495514993461199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/ripple":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yb7NVS8/+SU5SFSMQWJd5V2N3bBTtvxXEa9hM1E0FqQTSTAQvtxsxJ9D3YCUF3yxprXw4+zVbg7QzJ8ZlDECPw==","shasum":"fa65ef5ddd15cfb0bf24554915bce37f158ea461","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.b74ff19f.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2iwCRA9TVsSAnZWagAAWiEP+wZd0kvkprMO4CA4aZvp\nsejkcpiPPkTDajcdQ5FPmV0eqimMRBliEwnZ8Spi2OpopNB3zeQDcSIZOHWr\nXSO9f20CrVgYKIG7ESLOpuIVVsIZYYoptaG1+Ijg5skHRSh1slFNzKSY1kJK\naJ8YWKatoKfJmZSD0MeZ6iwxNWIpMWt9U2Hm71e7/PnabrKaD1vym68aIOWu\n3lRgPXW1sC2+csUJ4e1mOf6+c7gBonU2EkFkQGFxFDI/LGLXmD1wK2CuyG4s\nlbcqkUQ7AFlnpmuG4nOkDTXrfJ6ij26n3O5dkm2vIFp4au65e2Cr8XIiQY7Q\nlAVB8wCbEnaQ/asM/ckfNOrNQRBjiHgXuFMuNYLA8s8OfGk7Sry2IMCwWjcb\nJEDdW9uCYS3bD4QIvoHSz+Ng+c0rsBF2qMbZPjyngApspcT9D+A1TEXzgcUZ\nGLL4DGMSKTiw6lSELkjqpslDvpyjVxda2ObN3wC9UJt0zN043Xkv0oo3sBbS\nPYRGBuJHujDUUrYLXL4RjB+SrV87NG5U0N5RmqN6e7Z3d/+tJ4xuqFqd81hy\nyX8zE+dImbEOcPo/8xKUBDF0rZNoNbF8QgiIywU5gtb2EIUGtPVo3PfuMISk\nrjcClJZApvgeDNWBDI02/w8CfD8AQy25pE7Mv7+X7pgSWfRzT943bnPxImL8\nhugs\r\n=RPyc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZ2AFzVmOAvgpvW3YyGRD3CMg5ExaTjv3u5qsm8YpglAiAdLDM/+riw3hh6jT+rTfJXU8lcS24XViKMePo7sdDvfQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.b74ff19f.0_1586981040115_0.26638620198960394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/ripple":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x/vO9ABNEaw3mtr8DY3aDIAtR1FJY7lXmPWPaZu+lgu5GM4pZpK17+lKryipzAyuftRBfLhpWQsq5JkTtCks+Q==","shasum":"730ebb9a21e0bdf149201ce332b963bc2a47f4c5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.aaa16853.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41xCRA9TVsSAnZWagAAe+0P/jc1Auc/sIhG96plrVhV\nuNXrYCl2DUz4h1pLlasVprDFrGugaIAaHclkNAFOBRdecOAO3kwuwCEYkG4P\nZD7wXkm/cgvPStmDnaPQBQFFBz3PifmvkoFuCw4u6UJ6fQJUfZF+jkE5AMFr\nQVg8IN0u6F/T0SYqkyjDl6FyYc8EyVG99jgxrV1I9PBv6yILdj9Rdtpt8ruH\nskCJWSPlS9CpAwv7WD8LLe3KA1huP1SCZ7uUPn7r8XhvrlcGuKDCCId0itgl\n5iMQYYmJSQqumz64hg5L6BxavaF2X1aa83icBX20x34zmGgFBnEyW8KnKgOB\nJEbS0U5A4dhkv+FTRTle4pXtAZ8OkEoiM4I7dKcGWVMW5m5Fh76PQvmgWt0R\nAP1D4wDqQIaL4OdeoFK0RhE5m5gXCKsuZz0ydu+zLKFFXWGc+nBOgt/KH0Zg\nZXZyTG1K4lnq5KPF0YgJf7SE0yQzq/hO1P9e/3WN5ahwSiUNVj0BDXJrpBjY\nUo+WoO1+ZuS7f+76DkNbXirCmgXOSf7FSbFb/kxUz40YnKcyIMDYuCU8+v93\nsGhbZLKHnhF7Sd1NOF/uxd/8ZnX3PkmKaYwX4wFAnMySaQpmsArA6LPicKDF\nyHomCr6IqscjZxZqXZdyiKSMCCVrk9/re3XsKa8Buv4snVkGt3rwx+tbhx3v\nOsBz\r\n=RsEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAob+xhNO8fLgjVFHZOT20VBh7O/lvbiVOJUVGsrbVZVAiAli5lfVQsVQrfj6osKWmSsn8QHQQy8nkaOIo4yeeoeog=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.aaa16853.0_1586990449187_0.2549238565521097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/ripple":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VlIgBC4IN470WUSpmRGw4sF8CewiGyl61Mt5xM93cFyhDoW6hzI6fSnn9S+rPVudWjpxF6+I0DBpY3MIEzwJww==","shasum":"49d89126d09d9ed9f937fdbe416f6cadcc1c6443","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.826b23e7.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpvCRA9TVsSAnZWagAAVHEP/RhTZDCbqEbCiptegKiI\n8k280lS0yimS/DjnjDOmFFXypkWtD0TsO6gzNNW0UqIhK7gl73eR6V9LXe69\niNpdEvp+wTIGu6i28hAaYW4t2XBkeW8YtcrwIcLgEs++hM/Vy3ZsEIP4bz+Y\nNsVG8s4ZtcYm/oFTeGzIGi9B27/Sfh0BBpf35xPq44LT/wIxqhUGfBwxPTlb\nVyTw0ipvGzTE4X/OWVfxPIRfo5p0347pVZLpHHoAsGSB8oV/B2DdVt2gbTMb\n/P7bRZVmv3jzHmIydW6JYtKIYQWwvaJ1s9QZD43u+pGGsaQrdMb9Bot9Q41X\ne+JiUOEAOa7V1vrs8rcY3x5Bw7e1MFLpwxTQ19W61i325yreBhzc2RTcoYF6\nXhqSVR939oa8gCqmDLZgdbGhzIq5a94Xkzo77w3ItUWlrRazaQO9v6ucG4Mt\npOqH9AEDDLqkQgCw3Y0ooiFhae3vQ2u+uhavUJghVm09IUq5aVsH5zgm1g9z\ndlIop0riVCalaJhEK8uh0E6Hi1df+ufGU7/felltu/hQzO1g30jDzgCA+g9H\nrNBeiccckYI2d3PCfypRFkeGD6CBB6AKcn3KznZ4iMl3dtOTvpplLzt5SISq\nb9rc1Y2QLpGKwsWB68KceVCjai+AhE863Mjl3c0GCCNEibSMYg5QKqpf/jA5\nvXFE\r\n=2HX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRaoiWsa8tZzll/zSykaNmiX2PjhOpLwYgHA1KejbZTAiBMVYy81O1FWnB8GshydZgVec9Xply6RjdLK8LV43NRRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.826b23e7.0_1587063406682_0.13244002631871687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/ripple":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-t9HjQlNmJcmr1aag4oQZHsYwSBQYwrQuY7q2SeZUczi6L8Uti6BDiaryWcrlFrd94TsqAQ57klvO+iFwBSNSYQ==","shasum":"9f0d72a4ac2975835bb15e093648b0a54c26edf6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjU3CRA9TVsSAnZWagAAKooP/13d5zVV2OQhXRtIWok+\njvQbdZRg7nd8u2mXwjcguV/Cxq+iLB1kRVhcDrs5vSUT5rZFitNLdrvR6/k+\nbEjXh7FzJLHadDsvBxxBVqaMgTy0xkz4kt/4KbBZk3bz4SKfY/m6AxgnYKtZ\nzNAdyfU1SoObFvLIKRnWEHNr7W8VGnHM0rZJCyLRWWA12/nNAFWlHZNXAyR9\nd3CTB1Q6qA9jM2PWMeU5PeVrLw2XB17TU69CFvQS7hjU3NJEa/U/z1cYIASM\n9/VyAy00QoNVo+2AGomT5Q1g8Ph39pGuj86uq4qCFebjnWxB5gtzQH88Vo30\nK+5yYHlDkluGIQvcLCur03Ytwp5D7F9xX0zynKdJ6neo1iVpJSNi/B/FNfjG\nbg2kPRAPVtB0H4pdKGj4saTLZIDG+JtZihBm2fzv/HSYf7k8ht9aAdOAkajz\n3fNA+wimmC+F0aKfCSbNwNDbbkw9EUEEL7pd1OMOb8d3W9RMuby4E7RW16dM\n9Z73QZOGHE6a46JYuARab3YyVr6ugXrMbnVKVxexr0b48zy8rtmeztR4bfco\n7lIEV16HesPkpPYa6TUabko2UmMlDtzUHK1p9kkpVnGakp0/pU32nfTaKiED\ndgayN6qx7XiMCd7GLRiI08BFk3SQAlu0oJ42d8V8g//+BOh5epxgLrypB/lz\npb05\r\n=GcuV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHY7VTCmLQIaWEJPD1cox7/yRnKVyMnmcieFkKxB6tMAAiAM8gtl8+DY0X8Hy/MttLz7klNEnKhMtWfa9lCFCoYWtg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.e1ad2b2f.0_1587164471519_0.4801870262157526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/ripple":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-N0V3vbjzJA8lsYcCQloPFU+4Av1kfRZFDMXT92APHiI7eKw/f7DFnMkYEwAONyTDBFo0jzRaQ4kABAnEq/XvZw==","shasum":"0aa32ae1c9bf645a615d981c9a9909b0c1b7c18f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.bade5580.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjllCRA9TVsSAnZWagAAnkYP/jyGN0BAgToESdiw4/9m\nspmNcGNf8Q0Jrls8qDpuSOmmAh8DHWO+HRdE4iD7OfAvzxcrqrPJTuPgKagy\nYGTMM0tC0lOrp4iB4zaJ7E8eX44Mi2rhvutAL7HLahw49q1fPHfSpGt6+kh9\ngBVjVLiU5Lb1omDjpVG0Gy390g7ddMMVXVtN4hG/js2yBKq6F1jT+v5Y7VaJ\n938mc+AUfkZe97X+StEtwGZXij2kdJK9BOrFfG/wLz6cwWEakGkBEzs3CEJn\norCjzEt9MTaktHTIRADV16ibir0Ss2IWYegbtTXRFTV5pB/ZI13tlHHBugiW\ngp35I5LYDPm4g8gnwhhNIgGpvD6WOeS2/1AfbIqZH4dthWhRZeRxky3ZCyK4\niTxIBQ7nyI3OyQk4PZcmO2Lp19ReJiKT2Z6oVvATKbF8hQqlgR/8QxJ3B02Y\nfLQ3EMiWz7U02diMRkmrDfrUJ6d0AG4oJBsckQDSZkhgx+XhqUtWzat/55+W\ndUHSrme55tyIpIDssqPme9aKyPThO6B8N+mgct+c8rlKG64EiaMCIuUirbxS\nSc1q+nVqxATjNBKQSx5xPZOL/AIjGxWKYCS0LKjhFLYHrPoM95c5pficLGk7\n50uV2U802KKcrMElBjxSsLri4lKXoehzT413Xwpbm2jAJ/9UFd3NQa/PhWTj\ntgdD\r\n=tLCi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNND2TRSZrmSbWWgsjYGIFHvR3PuTdr5k04vTYtV134wIhALxTOkUYr8DwKHHuG8kUYPew6mq4Gle5LSaUs2WAFMz9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.bade5580.0_1587165541142_0.48472794913883943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/ripple":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FemdT2kTbI6bg1C37xdupz+CkU+Nf2xx7ilq0kC+s9/aw31nWHZzwC6EajrSAhJVa8eGjgLUllbK8xMNIhfLrA==","shasum":"5b3fb3a8c6d91622c4bcf8a77a7c75c8bcd54bf8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.dae38247.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemka/CRA9TVsSAnZWagAAx1QQAJBDJYCYNGB3NK6xxBvP\nTYFEURJ93gj1Bu7V6lVDR9B8cx12ALEwg18w6TLlPNXj74R6pDs77j/eqrUr\nJWPjIObRF+UBHi59AddrwCGt7hSmpt7QOK8fInV+ZCL5B33+rQQ9ec/o7niX\nnGzrm/Vg15QYFbYa6YNQSHG7dnOhOrqe5eHsqPYYhLno8uRt/qZDFrESJlNk\n9B1smOsRxukmysPcdT85BRB7p6Yk3Edwo2szBR6p0P1aXK0zNwCEL2Q7+nRg\nCsP1hJGj1K0p7GT3CvoxmS7huMLzFA3v8K/Q9mw0JdTuVZXRoZtc9jmugkQy\nWJ0Plus9n1HSvIVRJY5Exa5Rwy6Qcb/8qiB79vqZKCZQIWbq7QRKBNYuozTx\n9ky5nvOboh0xRt+O23g4JRspqVEw5jUdMnrj0/1YkJ3Huu14G6ddzCmsHijy\nae2GgpJ1i1kBTvvRvXpv3fLJJjiePwlkg5/62dyUQiqvJC5joRShcmHMPxfD\nhngQSG5+0ybrgDJM3yhxtZZ17V310IJbol2Qm6ccmn0h6iAxPQi1kBLJEE4R\nbwsuWtySuwcd/kGiRP1pO4hSHSaaq5Nmio2EKu8M5CaYQBbPEDIqwjuivlRs\naBDFio2WxyYV31TJCvy0gvNyNF2c25Tot3OLAFxe5VO4YHZb1NRF2rgOidSe\nL5+s\r\n=n5ZR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaQeUdnKrxuF2ikLIM4mdGrLHZRhv331oDkJAtFkMGugIgD83nlJbOyTVFF6YZWk5rII0tqvV0FjgbNV3vJ9pr6gs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.dae38247.0_1587168958922_0.03218781254195835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/ripple":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ixVaWb7nopQxFrI2r3fjWU16zEpAfn7frIbl9yoG1ksr5vMWXeEiNUGvAF9ezN/STo5y2B2PkfDInMhL877x6A==","shasum":"3fc00bbb9e460ac7d299cd7bcbe8429ecb3351b5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.a04c0b82.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkr/CRA9TVsSAnZWagAATYIP/iBSKxn1wn7RIiNuhJhK\nibRGrgpzs0TOc5x0SwyI9IwhkaVSp7Awrl3ugDU606ScxZuJ6oEO1W8rJQBh\nbhNTL+M2vQ7dLJfL1UIuF/LW4DhuInR+mg3NREGngDtctBu88RtcGtxCipyY\naD//exmXat7/FBvc8NV8hBsqMlQWv1SyBRYgXFF8WTxJ4VYgnfKrkT+FtIGZ\nJNQ0YTUOde4CjXyKdivs29Xv5NO5iUXXNLcU1zvPvQGzKdrjN8sFwXeyanjF\nnmbYHy/QdoduSiCBTbkLPRNizlm0idMQzLwQGrLGVS4A820STnZliTNjoch3\nEn1/akrCI2IkpfQOIfciYfaNYJn5ktVozi+f4BG6AW8YluI1bZotbeEwCGnn\n8INTQf1LwiAtqKZU94gcnNc/R76PJfqh6EOVZNA9Jbdc9e+PFLGi/PpKBesC\nE+aMmEkq3ELZpobw5/MU6DX0egEUsC2oBLNIbqAAMvrqcFIejXa9Rg3q2I+Y\n0aRa6Yjod7jpiPGDmFWjXUHhXH9Ax+8xgpwY8TiYIqLmSTzqtvOMozNx8rsX\nvOSGTKUi93073+NZzlAItjP/lF7cGDdgz9QeNhqm3KapPipCdrIO8avAvGEu\nK4sGkouwK45HsWlbfGfbEK7VPa0Bx29Xb+E0lEy48yHf5jRQmnZOI+u1ypmv\n8Cb8\r\n=/AfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQx8glcja4d//766GoaIEcv+MKUAhK1wqNdGYMPum/dAiBrwpMYviWyWGOI2dgaONdtATT2bIKR+O2yD4iK7lGIVw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.a04c0b82.0_1587170046571_0.46489681581431985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/ripple":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9EDUAEVQ4cXWEvspnfSqOPg25GQkILy1S4j8PDtZ0ceJaEv30ENRy5YE6Eswx5/7V54n2PwNFs7IvaNdDpziuA==","shasum":"5d2319299c99dd6ef439d3e826820ce7611c0d3b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.715decfe.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetVCRA9TVsSAnZWagAA47oP/1wnEgM+9jDAB1VPLj0w\ns/z7yr9TuNXAwaMFjTUYP1LeS0z18kvyyIo1utcSAmc9Bp6mlPDyht3/MPWt\ncXWd84NN1eWCuJWOn2vhIes1vfdatAOBmtHC+aWhxzVYfaGeomyMvBQqtnJd\nPAjdnRUqbb1UzoV8mqx7unlBhdVlt8fSUqE0GzJL+MFOEmazDMkis9MlS2aX\nfRGX7ks2mJ2rfSM+SxJdf/FNCnYddk0nLr/qmiLKr4k19fII9ERw3Y+WLxdn\nXIkzi1S6s+8abUfDVdvMAc2Wbb93nLxUi5FIur5gg/59dAJyACAl5dnr1ygz\ncLPkKhpK/nIy3gFe13MkXrjue/XXdy6M3TjOX5vvKh6OQ0/8w34DRK5u8DIC\nmbG3OdbfYDh5fWSkBx4On1wCstCfB+k4I8S0g/wAx5lXTEnbEqiSjtI+9djX\n37lrAVAISoOnXLJZ0RM0+qxhDj99IJo3RZddz+TDbDtB30BtbdTzQbldTqXg\nnUMkn+zY0PE2WO5a1mw+03hEeRWP/OH3kH7eG9Md/KbWBlJaDPvfhicNo39u\nYWyGHD2Y8jFWl6R0LRDco8449oA4Jk35jh1VfliLzDzckMOv/Bxdmc3YAIlJ\nMPDdg3aaGthsmU+vIYMIAoanKGHdDxPmkosaOMR3qOjoEnRut+whYuQX6NzI\nwjCo\r\n=q72M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxLdTWFFQY2W42rcTNI4LTMZWXB5S4q4Ua+6Cl5ZedOAIgMAS3kWg4Y7p7a7TRXqTBUZsbikzq8Ap9Q2FsiP8Guwg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.715decfe.0_1587407700300_0.006451064297798181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/ripple":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zSq+qYfmB20YpXcCQ/s5u2MdvmAqj8q3B080JMDUMel1vj4i+XTYyCUDDbTZFRMn6tY5wCl8H3HfZ9iRaOMzpg==","shasum":"9d47399f5554b06902fdc24b3cee767f7e12ea11","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.c862cd04.0.tgz","fileCount":29,"unpackedSize":109590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhU+CRA9TVsSAnZWagAAtCoP/26AePLQgor6/Ss/VlyZ\nTff0wuyGrIGXqre6jyzCz4/mYIMGk+yjV49wb0fQhZ9MYP4tRarxJnHVSjxk\nje4mcIFrDKFGEz31wq7Qqkph1BwluRqDiL/XE7DQcnHqESTbke35HhsImi7r\n9uYBLTm+VoHtTu+VuQSn9K4MM9h2HX0x3Phkfv92dJJKYTq9M3DE2+Qm+vqC\ns4OrPL0yAFAxVZ+fc4w9OW9PuyqBNlG6NkZFn1CqZQws9bJRYOCjw9qZOhje\nEHELn6g2Og/bEh7EAGlOVNc10sgVJU12pzYM0o0op8fDa9Rj59IMA+7qS+OT\nOw13TygescOG22we2GUqI7iv//jj4JJSyY98qshKTXOkiEAdljajkMPVkR1M\nmU9TxY1iUgby08qKMliqkiKH/if8b19MkC0FR3H9/epMHSGIMU9P7H9vVPj2\nD3rs+FSGwhLadcQZ1bP26JxJpT6eCrcBHwY/OG4EGnHTgs7GDrxpLmJgm0DQ\n3K4lqb6sHRwBIIFukpFEmE5rrJ30TsfyUfoUV+RPQEGScC+irGVLPSFCDHrU\npgeXwzyp0MRht/i0//Lsizijdlacc39/nhOtlfBKvpvQ3uS4TeWOBU5G9HMk\n5cxZymR78aNlWUqgED+YEz2aZwsPfkLH7PlyBqNYrwZ13hqEmsZKntriloc3\n45Ir\r\n=qFNB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCMBwQLDRS1g3OdQiCnISPs+aI2vHWpfpMdQA2l4ZxSwIgf0Ek6BnOKWYnSG6877Cqtp8SpjqJehSBmF5IqIqBHII="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.c862cd04.0_1587418430511_0.2767045355744402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/ripple":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ouEN9Sw3losFWDC0dai1jb/+uQfbJEN+u7zrTyVKCKHbEe/Tk/L2aa0NTVjlmtcG7vlRyrv148NHQP7lPK9smQ==","shasum":"e95610b4ba8fc2231444fa648a72b922190a879c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.e9b01b35.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBKCRA9TVsSAnZWagAAm+wP/2EpcS2R0qhYTcT+tTzF\nkxTRHZpmhFJsZgm8GICkj4DxcqSRsp7mYU6nelKg5JJ74b6mf5X9+ltWbDZ1\nfhFQfSsd0RB56yMYHrHQn0b1VcDxs4w6gwY6CXQfahFyq8koQcg5hcGiC6Zw\n4p2usFsS5HsPnDOMhdFk37O0JdWHajyw7uGRaVuQFgdJCsSvsuAvslFTNgzc\n/Ct8Eb3StFdimTp7aojGggqogNWUo9GOKPK5o44Bj1bnweKt+ZFKMGTbV0sn\n0OFPk4ZfhOY7nAOhOFxwjivnUbbuEFBmDihTEzM6KBgI1emaGihg17WbY0uC\np77prSNhCU8nJDQl0rWSIidlPbFEgEOM34IOH1loabzqDv1q8Wd8kgr9C7Ym\newZl7RCRoO5V7NXkPgt89jdftJJUz11x4VjG+s8hgb+GrymO8Ti2LUgtsXQN\n6uajgpRo4Fnq7IMa+z2Z1EF9dacs16UOIYEp1E1B5jODiLEBpK71VZ44LYyH\nk+iPTdO0v3zWFcTuCSUdjhgxq8dG4GPjy2Zda2rMFr6JQpzQy/vIYhxd2u6u\nj6FbzBku5RziDQvGMME4v6M+J9eTEA0kaFkA2AU2TKGg749k8cpXexhuec2X\n99IrpoqOfpUVvu//8Ugyn0V1GCMBMAWFx16s8/haBZbzuXm4/alrVUvczY5W\ncK/T\r\n=2w6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHRprGkMvmxlRxrx2tCZmny1urKee8c9ExsoGMpP+DYAiAtdDmjsOoMGpz7E1l5xxLnE/9kujfb+dwFnsB5Be/DeA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.e9b01b35.0_1587425353904_0.6639306320813336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/ripple":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iHcn7tD5rRopYCmm9GJrSoeTVNMOwKlS5Dp5VT1WuJWXIBtpBpQQlvaHt++jfeGnsYrdgFo3hCKyG30RI/sJIg==","shasum":"175e16cc5aa66d0b653e8fa341e62d7a37dc2d38","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.ee7e8989.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkN3CRA9TVsSAnZWagAA5skQAIY58eKReGE0YZWUzZmI\nm7iVLuai/20t0XIE1lhVp50bCBk2M/BeFYxdEzRLi9UMwh7SC0FyZjrN/ibv\nkhYQTpGXeALDqoQC1RmSQj3WA+MrKTWOZUIXbIUyudHpc19Yh6iiAsaJol/c\nZ3kKDY2d0DSUCBmi+yQPqrdBq0DbFbKHlK2NS88UBmzrgxiJheOqXdrFTAD4\ncEb3NmYmxZ+MaI0gUGxyIIY8FCoJ5d/Eb2aH4jdW01M0CNnAqmPZ09YyoLOu\nmAcdejoVdh15Krz++yuVwHrf9Q8ncqkKSsXVWgbrGs+xIDOFNo00bijOZufJ\nvpFEtfdtCvJ4rff04vRQS4QBpwzs240SVeliT2boBkJUqRntx3IqvVjUyJ3g\nCj2ia1PVKSS7sxbvw3FYPntFBrdwureeD1YOqvI+/2h1S9arz8jBJJOAniKh\nbKjdf0/27jA9v/5lJuO9o7JxD1myW3NQejpf/ajFXOExffe5Wl6t+4RAs9Xf\nD1F1XM5X7Zos2QS+YJsOa1sbrBak1rE10NLRi42DcRMntBjdeOztficRPZ8N\nlWoVC9XnBzj4WROC5jSQri6vKPU80MoYOeeByHeJwGNxygUV4kltoJIR/yv+\nggqH4XBgRbNGyIXCO6u8O7ciiWs8o/IgYZ7Pjb2gk1Kxu+l+u1YKux7bAaj8\n0Lp/\r\n=NmKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa4OqT0D99TZkqjrzDkDFDU54mJvsGFDAX8IUjTFsOawIhAPBtkp8OSJi6d/2awhS+r8iqG89KuqogEJD7o/qeefpn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.ee7e8989.0_1587430262700_0.07002335322975184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/ripple":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oxgYXCYDwleh4WUEEZfKdGHzbRhmZkjngt6xFawFrVXx79zv3bcxZrWXvQk3tmN3ZgbYLt69eg8tL6PzOF8QvQ==","shasum":"3cd936afa0bbd86575ccf7b0e7960461733d9f61","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9bf47ffa.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz1xCRA9TVsSAnZWagAA4dEQAJMJ2SbwJvnXkHOF5BlX\n947TJ4YjxpADc2lJqCPj/rDMSirQE/qAmv1+xLaEhSErvOZaMZWC2lw6mSDI\nt7FpC5nqfn1wRAOPBVvAUUOrrcxWp+D1EEzcwvFBmcpIU0fLRsihw/3i/Vqv\nDk01cyyu8eCfBQrXDK2HtCIDJUbPkFjW+38va+B7mlIGzRIr5X1A3Z+oB/Gs\nZI39BV0zIsIn1d7qbWZZkZl+B8AcWRZBNU/cNJHqXjM/S73dh345rGiYIMM+\n+WKsnCs2nDACwE1Q8QLMz/twBGuPtHvqz6N9ufEhBeWYoK6N3G0wNZ9pVSYv\nPAFpUGERT0+aWx5YxYl4n92hTTqqYcicGjf53EvqD8sdRLQev7fuQNrnhCZa\ndxKNk4RSUVCE7uYAEDeswNvFcpe0FAWWgpsn5+qHBy/a40SehGkNgK/5zKNk\nKWfnJYorSA1k8ez+m56DkWX8id3a6sYw9v/1z6cIu0oAPlPaLGvJkO7B6ybn\ncQcycXKfgsm6UodRs9f4/Lc3TL7cXI+dIfhBIqKIykydf+lD0bbjRbuTy+e0\nHLaZ+hWrG7raCg36ptKPDFsLp2S85RD4Uskc6l9VfghWIxGYo9JD8SVmxO8Z\n+xDtAtb4oNUJL+pnGe1dLoQ+zKr79EmCYzh5zaUICFugdrYmU3cgr2XjJOB3\nJYd9\r\n=boAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDViDBO64+tTMLJoGv5rzkqVTqpiEeW/dCMVFCq0U4wcwIhALALuLd/CXcopBfUDRrMdgv9mBhNbFknSWoJJdLc5okD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9bf47ffa.0_1587494257202_0.11222512734952739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/ripple":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oNVofKB+fIhyuxnRFw/E1YUzNWwArH+uMLY/iN5vABvXz9FbxJkc4wJsKFjBMdwDKC4zBlJY1adIr3v/S9ZOZw==","shasum":"a3a98e6124b62781bb214407fcb1ca6e4b519592","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.078dbd98.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GfCRA9TVsSAnZWagAAFd0P/1buFUuc7Pxzwm/6gXOm\nuP6eeBmfiJ6Tn/waWZ7a90Gwvc/hqlcFv8hKmVH3XX0EDHvz1JAFyj12VH+c\nW/CdGhH82ilZNdp/G8cdLtrmCNFRHMjIGyUdywXYWYAPrPkxzXf7+fS8YaSL\nRUiK1pZyI+W7rUTknkCQsJkzClf7kgxo7hoz62l92xWjDuePqOY9VQjIqyTg\nAZBmX7uJZ/9aaC1BTL7VZGzmrhM3Sko4N93SPf35cqj+uTYtE71eO9IqcvYK\n7MCQg5ocDV1xZDbZRxZZu4KXt3JMUfBScKy6BFSZREVOBOgfQr6WydKnpFOB\nRieC4r/KecNXd2DNl0OBAS85BvYcxqzbWZ4fk82PsO40dzGPJzxvzIsy3Lb/\nyqaBhIiFnSKbZMF7BbKBWq99c9CBmVLQZ9pefXOqmcV0rgQEwJolu2U2qhX2\nHKg/4KqdufItrWPqvtDIIxTVTMhC767IW0ojm/pQiO6R5J1Ys0uIkVojj0L7\nvI9WP2Toxm7JR440lOovS7wjXOLE1jkFPsmUA33cTFjP3sy4+jeNXcdnBYVz\nREkExL90cZsibUoNoctRE7UgeygQRZVNSW/oDr3oGeUQwKtHVZHf7bhMjHrf\nIZxYBW1WrwoiOL40uDwksuxQcsLVnx5pA5Jp+mNdFawhwRb85lK+TXNWAEGu\nNXB8\r\n=sZty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqEMynBsnwyq3ZVzRkAylD/xC5hDzbc2pwuVdBRwI2qAiEA5g/4HRzbK2TLCMrz4d/SrVN/u0xVylwIv1Z+Uv6BarU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.078dbd98.0_1587503518993_0.11755312333249912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/ripple":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s0+lrJ/sDIXvzVwJLPErYcxN+p0pGxmdf5ePoKIFERCccuERMkr4JK+j52A9cONWeLIGfAQZDGAM3zO0rJchgg==","shasum":"7983394e9cc1e5d338e3fff6033614be3b28b7ff","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.953015d6.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2ccCRA9TVsSAnZWagAADMEP/jRXUVGgrHK/0+aGAeUJ\nlHivyNpslrwv+9Su6xVHYUPoUgZetjSoynUeAE/296zEvUp2UrVucQrjD+sR\nJIDlOC5Hpjk+Du7MrGbvZgf0fYaQP/PMcoSUVPKzaqq7tnCdzC2gBstju2ZJ\ni/+0efjL+5e7RWz+66bjNYP4nn2JhFDD2nLl6lOrNkZkj//pCLh1nEbdoZGP\nirpVVGG5q7Hr0v+APbro3BaQ96Su/aAbiL8RAeIMXXJ2uINUUABoJXwPAIuR\nuJSMMQA89YmUutpPZHNAzMeFSo6F0y6XHELuuQKNTNSLQET2QnXYljoF/YR/\nj+cUhQELtvMk9JnjZoltP+vGnBQcLsMZM//ozESXseoB5T8YDTWkQboym6IJ\n3tlofoGffDOaHjELRCa4g9CngZi4YcTvE9GJBuFa90VI+2QHxLMkAwwx1+K9\n0/Zw3j8Z6fabxG6NdpzLYkpPzQwPoVphy564z6T1kicp/+loegRbSsN5abL1\nhdHpmbfom0kYgNS7U7rFl0SILqBUhGCkyjydAreXSSLqY0t6HDnANfLWh0U3\nsyJ5XZSswz8wih1UJWXBnn10kDQW9k0C8QHvpJVwzw0Olzc1sU+WanfvWCNB\n7FhuHVuI966u8Q8DG6uSfdfauaLJFTVdR19wKazioVbWEQjiuBkGjj1vhhA7\nyeTM\r\n=wFdw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6VD4TA1RmBP0cNsDRAW44RRDDtcVjsrfSy2wHubFksQIgRyNU13Zi5TDjRrhSrvC08dSy9ZucSx8ZKSSpNe6PDy4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.953015d6.0_1587504924211_0.8364037160767708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/ripple":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-m2gs3NzT3bYcDy9riL6WJAEcmRWu8FaZHf55L9Lg53SeSM7lS8wQxiAclnKl9x6+DAoQmDKhpkESRd+m0Vo0gw==","shasum":"d47109935e61b1ea636826b8fe82ecbdaba844b6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.c360ec63.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yRCRA9TVsSAnZWagAAX4MP/0z1eCf7qHVuTnVM8aaa\nPdoPsk+OsuWnhq1+nxjgHvyZQFUmztSK6Q1zgzTROUfWigiQd97hDnrYZZKA\ndGgsFMGk3mENkkhEcGgmKY86akGnL/uMc64kLvtxa+v/6fVrNWj9sfelcpZJ\n1IOWao8Gjr/QGogUfQT3FGauWaOa9inlgj8U4PR9LAR6oLtkobAU/tK5DREz\nV9XOf4SOmd4J1Xk/4wCdRU1zlcHFt943xPVRloQhuLdJ7c4qEfHC/0b5gB1S\nop4wiGNfUpCkCj6bsn4QQsmYTUJcSeXkkoy1PXrDDLbmCQLqtJXKnjNeQmVK\nUFoVZXn2rlS/z+2vdy5cQ21NUVOd2r5fpn8KGdieVQUzx7IbJz8+C35t65cr\niDq5JCW1h18en7PD2QG/7ynFU6dNDSCbthbcpUHP144hmBBx9Ar6aAIQTIRj\nXcVFPjJf/Hph7pNAvlMuUazqgusptLWRZH1Nh6+7tanK8Xfsm1SqHl82JdRT\nEX3jOqRsHpeXtsh0iXOo6FpjeNwGO8yBc9DSxNXv9BCF5a444pFC61CwcIrD\nOHRarOJ4RbWBtdKwZ8VXi/VDHrCAG5xYAxwvvkbEqvCNjEd1V+iMtCUhdRPk\nIOLbSBVZVMqrTN4jVOtgSOtdIgfEnFevljilq1KeQC/4u79DKrxdev+SHzPv\nrOnx\r\n=84FO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5rMn7TIUVdiX94vFdRwDwzOSquuVCQ3l8KF1wql88jgIgKlbJMPGcAch4ohswmH1eE5J6dJa7OxCawziqsHPBjfs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.c360ec63.0_1587506320697_0.36958101969331403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/ripple":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZxXyPMp/d9AperfRyWnJFhxenkY1k3garaCblJQUc05UDEooSDYmg0lkfmUTj4bS9Q8wul5GnDXcN+wK+D/O/g==","shasum":"ffd049ea853284cb94936a0ba7ea56752f145570","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.d71b65aa.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WoCRA9TVsSAnZWagAALMgP/j7O10rgxwunIYV6vS/5\nK8zbI+Whi2t0qSnxSKcBTJ71A5ZACs2CpZZbxrIO3EoHCNXlEWq/abkcEKGK\ns+h5iQ9n5+JmrcJn/pbQOD1asjxSHwg0I2xHZenKrlHAgCLN4KL9Ql7zErGx\n7jLHCf5EObaKD1GGcb3CDzz0Yx2IZFBQLkr+LzW+OUhlQ0i1Zm51oEp8Kxgk\n9auwqUij4jLEBdNAVNT+2mHA4sCCdaMBnpAO76vqFiiI7X6dEaCRJBbYTEvL\nv1S8xT1A22wXcDzFaTAuwFLukz4wJL+dac9S/T1Qx1UKdrDXyGX+VpSKVw2d\nidlnOEP0DdAxrZlVJ0V930eIWYAIoGCjBrNKvOaNleWF9haTOCFPOflWIl/P\nUxNtJnm1T8rh/0y7RiAf88HjlBCTv4XlJ8sCswOAJoVglFBuBugKa08jVv6k\nzPWIyq75g5JsThQC+DX7W0BLc2g43KkrmSoAlSZuXAZWEjO2VWMl0PjypwxE\nW5kUd5dmKhuTOX0Ssn3yIz3PdggCtciuoBcrQprkdXDRpnbniih8v5Fxg4n2\nYb54bP0PvWgQnzLYFw+7GEyJ2QvX1yELFLitVCCDAIRTgzJdMDa+hgS0umx+\nF7kKOW70/mZG7vEUNVsWbMUhs+KNqUfR5bmAwhiAoZvPbBi7WQTdtiUt2r+O\nZDTS\r\n=Grtg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDioQN1R8lc3rLljnVYWiKs6PTc4Z1C5mbFaQWT8LqyjQIgVTqnyUg19GMDp+nD8b7/Vy30PvL96RS9BcmRd9XAbco="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.d71b65aa.0_1587508647790_0.782676429005668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/ripple":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rIifDCXBHq4N6ufazcMI48IbQgTxR0C4zDlWk84KphMmzKa++ffYY7VObl5L7qI6rw2tWYmy4rf1Su/qFSyzfA==","shasum":"889bf58f845b16b6ae788bc6705ee8d391f124da","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.58d51135.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOT4CRA9TVsSAnZWagAAR8oP/3Wvfu2bBPG8UtC+hY6/\nHTuAhQm6X1mr595CmkSA6AUHUsOzMPaepZHNhgxaLEmjiFTnf6w9H1PXj2Kv\nyWIBtpi0x4y509lHoBhwaqhAA6Fw3Mj9mkVuv3In81lI8eR+Bt5rE2L2+r38\ngCg6qLSHi0Me1a1vvUrLUWQkYbdZS3iK2OCuIqwfw8XeL27A1mRyMkQ7vlQP\nddn8E5OZ1v3bSi7PoZ0OiKKj1FH8IsEHBRhFgPmVkWV5MsKt6hSX0BJX92Jf\nwhib4NTtt86sc7d86J/zhKBgr5cMgITuGSw1Shp5GshjIzAsTvjP2uZew4ag\n0xwgb+sHDUCmVuMJHME8x+vf//vYcfoLJLjcYxQBMIpHgBFtITOsYkZBqRgV\nRmIilPJ0cbD9HgE5IWbogVoCcm7WTmC20Yqr29HGyqlHDakBnEtSYiGlCWpq\nTxYsvZ22oylLdqr4XYc2+NLrHbu0om6/SrxUPniz/gVilJvbDpOYrDCDqOGP\n7Tapmzl0LmYiWDX6AVEHK7XfHX8z2RpjvOR8GHvSfTN4eVMyXqqUrFnrwvFC\nwYMUPafKoxyJ27uc6RvHAKlnjnjWpW/WaLSfRCLrAUCOhHjvcqCOxCuYgNrH\nHw7xK7OhtQh+MiVga5bMrAyqZkbH1mj1ALLeKto8MO6X72s0IMcBl0r+CJbk\nUvxg\r\n=tbHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUv9KUjs7djXnjEqeiE+QXNJkPBDIUZExEQYSWzXSHHwIgDQsomNKg1vXT8e9tSj+t3Lu1FKiswBi+G+yZaHwHCHU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.58d51135.0_1587602680113_0.25968808759731443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/ripple":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DxlJpPgSqek/SgmLdfhe2YY33uf0MUP2jurpNAtmCObuC4OS1iTvOA2+OgLCLXPQzPgDLA+DQ4c4/ceymFjKog==","shasum":"5ec206db2393053ba9aeaafdbe5e0e1b0cd94b07","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.d0af8ba3.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodnnCRA9TVsSAnZWagAAfVMP/iq+xcZN+LVB55yOQm9E\njzP1s7DIVSJzxFRYbQuck0c2cDfS8K+RnrmYE64MxDnR78Yd+uhJGadzwMiw\ngEP4Ug02YufrDPiaaC1gfxL8NHo9hectHtCoZq4Fcq5zEE71iNoQ0pzwAscq\nUQZBou6irdZrnnw4G2BGvDLYTpPZWC6uNUhWhLRjnY47uxgfLRBzIM+M5gGl\nG6ulVFnXFelsOJgVLDDgZ6q4vQt1/ybiS4vZBXlABc8mi714tpg8JGpCoOiJ\nnwyulfuTaVKNSe1SPEy2hkCyQrJgibxi+H2Vv9aWEyBv7KELcZ8qIkWhK5QD\nrsi4TmmjGc2Z0VDJpA4gtIDdCKI1XVIB3J+Fz1/C8Qrc7Lrg+JuCuRNeieI0\nrqwc9qzJzPv0AVfaEeBvuFccMeaUnuhh7bTOPI12qG0GQWzvgLRD9MUYLkfn\nDzEN4hcfAl3ABvRXtvazFtsgQzPr4bJDpBvxWer9y5OzWaXC4hOGl3yj/8dZ\nbCRxB0LAvMHlqqNlsa9BEODC/qy2yKDv0koYymOL6IDxvVmauMQJr/4ln7c/\nw73PwrYbHL+CmRsdYYk2wSdhDQkh8DnPfJZmuoEDyabH1kz180ACO15tpI3d\nemRxU5ogR6QyaTImbSvUPrDfq72P6zTbTg9ncsWUCKjQJjg8qBOg/Rr1DHUe\nZhk5\r\n=lJ7b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHl9o2H+/nWHcGSpyZcG65wwSWGq01YxHK0NN/REdfatAiA4QDLrl81PW7c/BCRMUjGALNWMvsN8h4Nt/o8jnsNaXw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.d0af8ba3.0_1587665382832_0.10458577710126993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5h1zrpmFPOSdXhUZJHd3T+YIFGL7AtRkQlr9RLEEYkplrjoOx3ZXguVSjxvZOyarhHwQEUItwskAvXsSqyMzYg==","shasum":"c79c0cb46ae1f16c5727bfb9c3725fd8a63524c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.8872b17b.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1PCRA9TVsSAnZWagAA3dAP/RyAZSry7AunnJILp6K7\nrarVPQ4Rgkbb5fJo+UT5chIQtlAx76Na946DLsjPMuIXu07bvUdSheHFT4G8\nXCT/8ymoHTBVCR4Qxd1evFOdQ4JS/2meBpBYFjasfoiq/u2z+fV4+pnhZTGB\nOXq9cvSSj0ToBXj2hUPmweJIbwiPXhXLDwHhc+OkkqVyAOoF5i8BnnIZjFGw\nz6laVWxZIVGsSdoMN8llZBTaSj4+/flfEGShwcY7EsCzSLZyqs1hPzchjnC2\nVipcP9E9bvPexwhkXQVaLfY689tdrvoK34ePiBxTXcSYRbvd3X6HrujCgW0z\nRGJYZ20TNqVH4kpz3LgFIZJStQs179JOdU5Uhm8fBWRytAhM43q7p2+L3DBd\nRoofYV1vCiHeEl7W8T2/OEZ7L6GglRA5BZqsr6ErJk+61Kmcqy9qrICn5Xtw\nqfrjZNvJD4fhrVPaOZfz9VaUosExZcHVYvlO5RHOGgm+dvmvtJ0WQFbzjRxG\nWarHHfaLS/McKFv6z0/fLarZzCJNwRRv6MQPpRebKBjVC2TTwJmXd0HAEsT7\n6TuLyZAH3RoxxRNPmO9gh6KU5sr77yFm3h+x6/Qqr97WFcP3Hw7xdXizStrZ\ngc+CmsaqsEBft3OGWoFimhwiAafML68bJXoFJ5emi0li2C9Sm4BNe1+Xuck9\nFxTU\r\n=vx8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfvLsmByDKUt9j7eeS+4hhFEMJic9FL2MU5QArX2npIAiEAwv/kjmCHWNrk4jW2y8shfHu6SBMUIyLQmQPCp3L3gck="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.8872b17b.0_1587674447048_0.7235095078544906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-puR2r9Y8QcKu238Niu7/NhVYdDpMFkQtx8qy+fqLbs9efiJ9Y2quPZs7kOdnui+bd14BLsLASbAFrJ9/8gfg1Q==","shasum":"5357935bc32473d97d15581b183b684f81a8a748","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.eca1a610.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvVCRA9TVsSAnZWagAAk1EQAJ3oqX1Nu7fsL2uQ+U0p\ngAGAwQ67oNgSdYJRflRo3PH2agMm1sOzfQ9uYxwm5F2BJahr/I6urTZpqJj/\n/i4vHN/MzrKtOe/iCXz0A0Jv2L7dGXI2AFIjO6iDOD0hpS+s80mENE9qTcVL\nTsu2Gy3Upc1rC3EQUevNGQme8UAJa250Sre6MYeNMorPxdkWT7BJ6lTkVuSh\nj47pAjCGz22MxcWXhxlr5JXo625+1hNNsxrfYanBvjNZG+tN7MpqXIRwZvJV\nl6yicMeFXDVsT6LA0U4j2z/3RrpF30vJB2f0Suzphv9J6hCgqrxHoPDHkbzz\nC3Q8Qr8j5+U1X2OCxXpjUvJSunt9VUPLny3++FT5QK82cWyfPUFKo+a0BxMY\n76Vf8u0UhHL7QyjbFzRRmJVqZm4mpq2IocCB30G7/9uJ+iziLJvAUUkGEyrM\nUioBP0Ldf3j2FPPdtB95wUatgrpvszDX0L5q86m7/nI5Z+590HF5oxcfJVSV\nhxS7ooDHsWgDl1nR5gzYYv4atHc+QbEcUCTB9IGx1k4AtNVpKZbzNNp6+P4W\npK66yTbwyAKu5LXqmHDDSMAHPu1Xp/WSbEx8HroZRYD+DOX8LMwd8Fmu1Hmb\nW0MKexkNNBXKXVGe5pvbxZ/XLRf2nF0lRUHRtpM5ehGEDRatftG6quxf/W7W\nKOPS\r\n=mPZy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS1s6wM1mMayVL6ODRAu/gPwCsAxCJIroYARnXNt4bGAIhAL5DJRSrhgw7opv70wWLZBz6I4EfdP6SgaWe9kSX++bJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.eca1a610.0_1587678165458_0.678633099701831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hliZpsbFjXJPcpgHBF8+mZQi6mPrNLNmEceMg/Uud9nSZgFEZlsWfYRLhIXbkn4BZI3KA/c5kPc/AD9wSYRLKA==","shasum":"8e9d2710fca525bb0cc6f0ec7d2c7ce9e1e02825","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.baaf529e.0.tgz","fileCount":29,"unpackedSize":109570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohovCRA9TVsSAnZWagAAnlEP/3DrlYZIJeOkH9/cTslk\nSCACX/5+QgIx4+YwxG941ch1Fj0lZjGNkrpsGm6on8mN66BDgEjxQIgmxjBj\nOBnaKZfGb4zYmkG+2W+L2FvidmxXNtDzLrUWxnDF8c6eb7s6buqSzrR7v7aj\nQ3+IjbIMf5YKisBz0o7DG26CqzVYcYShhMAjyEvibBP7sNELUaFOugLPEfG8\nItYRed6deWtgG2YjhAlzMEcWFd/0S8G2JwVq7HvWNKC3CuL0/5UXhdNxJDHT\na3pHYmabf25bf2hovukPDVEXoEDKsYyePF/T374ADYglRIdoafK1i02oHHDw\nM1oiJnj0dWxBbRUhICK+u85s9vQsARzo06+a0YABPMNvG4PC4JxnHXqqLAr5\n3wMwVWweQFDZ32zy2tTRe51yfQDxJAHmsP3TedGeWhr7+b10VKeYPJRdV/iM\nDEDDrz3MNCtlZup8PFsC8T36yqiMCUAAbtJ8hTqC/Y1ioRwIFpjCkl8w4YUK\nxDP1jNCsAR1GaCCqJqCulA0op4zLTAYSXXd7ey0DDGYKf7O2ok16IB2f7nWr\ni51vKwmSbKfx20Bq9xSim4qIEbKuiRk+8YVVTavRa6Hfc/LB3q7u3XErwy+2\nEW6h4QUaZxo0egyJplQUDPseGIfqPoDpCbd20Wav+4C65J4g6fQjHAYVKucf\nTtsx\r\n=MfHs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4T62oiJaClHdg45Mvk3IB8IY5mYwzTgTx/iYej2y6+QIgRkk8wx31/PhAJKYnS0WmSQ9DNqdLmOck4+4YwwlMyGQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.baaf529e.0_1587681839039_0.6763848000005603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gIwNw4lP6asaajUh+vavtoFcQN5E+kS2Fksq2kKO4PVmh43tyzpleppYzBtYUS+eAaSXInGf4cEePFTiWi6dPg==","shasum":"00b20f7c58590a73d81bbc0d371b546d399bb50e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.7a7992a8.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiE0CRA9TVsSAnZWagAAdusQAJDQli4GrWPTaJ+x87wh\nw2wV/rW4Q0D8eCxTMpDr80DYft2qWWhYkJPQOc+j9GpN4mbAef1ZqMg63i10\n9zy+Zyu58bfSBP8MfvuH5+rhE+QLxONwIQd5FGq7md3ZR/gNhJ1AXde93Qrr\nwFXPXj8otos6ZPXXe2W4SKjBMcDKaItDmU7A2t3h6ztBWyb/6ZPCma32TC1/\nIv/aUCZMK6YlBKxLziT452HE8DtoZh3QERWH8EKyvuR5r4gPJuAeHfbBG1d7\nhNsDOwknNOojE0kmN4rzmaIvF38E5mLcDyEW67nMzHAZuJqfGBmdRPji15pt\nvthxeXcl4ADFV0h2sfYiK/RGtMDiZkJq8LaTgVRm6VoPYeY0PJDb7yS1LopG\nTW1/rg3rSg+MEPOLog49B8piSO0uP5wSyAzk1K8mdMwFHtsYKRpZ0rkNb4s2\nECvbrVohhKiJTDc+JcgNJF253szXPAtWl+UVq2rJKTsrS6+HWBOpRahzSVOe\npabcbiwNAoRLMB4Wa8XSslylmwWGVJC5h3iQeycMQip+rCrf10/KmzJfkCcN\nYrku3iy8ciNwTBuk3h+inWdGnqBxjHc0Ke1krpHxdMd12VRXyECUKJNtO/9E\nUIyRAI9ckBj10heJoxjeX/YoVg3Xtjl9RLXChA6ynO49q2sxF0DIUVihK2QM\nJz9u\r\n=QKAC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGXIBy76X1q+VxjeOtChg8tKYfqBdBqJwIOtE4LhdBNAIhAJjjr3lsE7iDfEa720Z7fntFE8DcCl/CkVq012QyzFcw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.7a7992a8.0_1587683635979_0.371394008814393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-H9Y39WOIjHSGombEvQyolFrVokR/o3Gu/ypU5oBHWm1MYOPvCndBtOftd3Stgj9BJndZR0sfyv5OweiYPOCRvQ==","shasum":"5af3ffb28fc8db3c9bf76720addfa3ae76cc189d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.1150d64d.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBRCRA9TVsSAnZWagAAYK8P/RBk+4/GYmpapTnDRuR2\nqPJyQv0Y/zZIGKCqC+EcwfNgpEozNvX2u1bvBMP0KtSIr0IHEE11DAib3Xwl\nnP/TMSK6OBbA663pABPUF5rSg7laMCHlp3LYx2Fs71cYvunKRJvtI3ktsq/q\nGuGAv4CWquKWjxqnUVc9lMZjy9e5tw59FceSybAHiErhQ5kP0LUP+Bn1fTkc\nJeGBNQetIbYW+upUv/YU6MovCU3gj0D6JlN+y+7Yo1nNf7wLDR5U07cm9Xdf\netBkHDuvu44vMyDLNH2UvvxzdgROOaK9Ddiu1w0nXCwXymMrShNXi7Gf0RK0\nUhb9ymwG2k4A3I6ti/7LOL2zNIY5WHoUEL0xH6wQXNpPPXYYHGtzPTe/g/y7\nFk5EG5hlJJEqpIpiodqDWnWOCee+yxQLUKkL8xq2P/+XrqKcM+tvGy4ymbyD\n1Fyw+HTqd4Yi6vMC3TC8Cmo6vPxoFV5q/U67SvjIcSi+iOdHxxuZxJyjSZcz\nAOen6x92V0V9lYLnaf8hGLlzuUqDmhujf7M0nj93qrpFCeS2nVUbUX6i0N01\nSQ6/UbomjcH2lkSCZqO8DVWAPzdtCaMFWLQ5im88o0eagBgQwb9v+UEvQ8H1\nPDePfVYk2EXkD77C1AW3IvlnJELLYQ6bp21cKlwWsf0WgY+typJ3S21lbTaR\nqfjB\r\n=fUNt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVjfqYO/bhtzfGAltAdIV1R0xnAltJt/YZTLr/m+oq8AiBcLFoh8F0jsyCyYhes5JVmSAcz85LubIHGDzmJADlKMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.1150d64d.0_1587687504719_0.9688398299965697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-utOZ8/JJtOOjnCCQkb5JG1V41N+2MmVJfbgHe4EZSX83t2WHCxCFoqM3NArou2m4KNbTREaCOT9rRxRn69aCyw==","shasum":"3534aa8dfc42dcd93dec1016cf4cf9f2177146e3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.dad3f828.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4d1CRA9TVsSAnZWagAA3KYP/ROwv/aEfsiIRQunH+9T\nUJSXnsWFOhBI7qdjd1tJzemJ09nTSoQt5eXydzvSmsPfhSiU3YoCZ77jFvI9\nHrb1UAV+a7akBQw29owTryFxmxs5sHiRPlITW8angTPEzFNd94JsvCAwjofi\n4FWHNSmLhjRf9cSmp7Rg/6MgLj1UkHuRo7/5v7CB9tBOt+7ieX/ThFU/9hh0\nUk0ZSQFt8vCHpHU9waShioIz1byTqK1mPlBa73GZA9Rfz+PHS5cDULViw/Yu\nMgOvq9hhlRJ1AAmY6ocm1RXfj/PUO+tTpVIczNYl0K/+u4WXZsHM2dL1rqR+\n6JwRyepklpNb3KDq32uJcL2wJfSm/XGNbrsmy4gxzJtWAyGG84TOfwaWINpi\nIBSaLtg/HCI37OzA0VVmXy3T5LS9q/IHP77iy/vNKojJI+kUOLcD/8+Kf1lS\nbQmknr6cdpjr480+bh8NidQothJXRQ9bRqf8OAnmlVDnQFTNelql4Dp+R2L5\nwFq8S4E/vcJDaszELijVOTc4rlav4uHxOq9NBiLPxmsVL4Be1uqHR3YOAvVM\n9fctYZGlUuCVRm6mA0HERO8+cUf1dQo+yDrlEiBYliq6e23SmuHnOcaXzmly\nq4fJ/YOzi/eIInKXrwkUK6zSnqYN0OsmBugDRMiKXT47mJ9Iaibwb2KwRNXv\nb1Gw\r\n=j73j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO3wBk6AmaZKUaUtsKYt5CXm4o8pCQpaGW5DIPoJsFSQIgFYIgjCSbdzZD1lv2e/4nSV0ceo9PzyPu7gA+ObPUHFs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.dad3f828.0_1587775349182_0.8352306130300662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2tCYSq2RbyVrIRGU4IuM4SON53bme29QRUesLuvbnJNA8dJ9I2m57cGAoC6S2P4U59gAHk0/68K9Gj63YB5kDg==","shasum":"6a338564ec6f5615188898aacb27977c60fa0acb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.1bcdb47e.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4L/CRA9TVsSAnZWagAAQOoQAIsSFiJz6pN99dtsCEPn\n+XubS7q8qzn7msl2ityZ+08HRQZ1JkWFjYcascoDWRAF4OVwFaM6+eh1Jdvh\nredE2TyWC9u5U7ApR+KRdkv42n9dnvFsCFa35lXaW8He1IGVF8cu6XR3I8C0\nWoq4U5j12i1XXFzk8VImZS4ss7CG010SG2YE/Vbs/qJy49eGgfnACz6gJOmW\ntfvVAyNLenDvFarryh1ZyA9BY7mY1PQdN0alDqimxhls2nxg5zvK9TR9Puaa\nN+4p69lMQGu+U9zx8SV1pTXwoL9UmipyIjdxZ5eS5Yv9HsMobz3BFN1uI7WW\na/ectzoT+7hUQISivFOGeQYTUSW9V+qEvdD8uJAYrwIrQzAVK3avPY8H6z7k\ntHi99h4UWNzKyjWMKhf2kVVv8LAMe5QA7XPbzKnZisgfmZ231CzDyz/wVqm7\ncHZ9r/WBHWXilFI1HhU8XrQp50o/6o+fqrGQg4uzPZcJiE4LYNF+W47OiKjB\n559gtILxtfkZrYDOqlioKrQjMM3z0SQY0VcMfYBW8FtRITSYWNH+d+RQIgVR\n56Ycqwj0lVEkICjpIyzADk7DuLouYVf/Ozu+koCtZnxCodl9TQeyBwcuxE8C\nd27jCYCqutY0emAuCq3HDOt0rBO/IxBbujnmCGcEnfdUzWDvUGZELvZCZRt4\n8v5C\r\n=lmOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAK+kUBKiZPgu3moOH5xzL1Mi0snS4WA7coT2tUeTE8gIhAKzzE0bz7nFB7uUqZ14JTkI50OfujlVeqy7Xhv0M27dV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.1bcdb47e.0_1588036350831_0.6394850982230365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/ripple":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5ztxIjN32pcssmFKHCfLpS3qs218esXUeKxSKNtO77At1sSzHmMcUUEXbLuOkEUeZVFGR4gxgJLknwkdaMM1bA==","shasum":"2b311490367dfff23bd7746a93fb8987c2366ba5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.86ff1b9f.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5sgCRA9TVsSAnZWagAAYyoP/iTmalBzEadsY5auKAxM\nRhV8BvmTx1MwUsBXNPy5nyKeB882EsvoFw5g2bMFg9JnUrGIxNRN2ON13sVP\no3cmLYtm/31vuE/XAB7xRumoUwh0qMwbwP/PRYn3j0RDEMrkaHgHlcfkgkEi\nnYG8TR7lnWnFuz/KWHkYlb2z4WWUwedavttdSwoWGuJlOIlsQyQsyEP8pVca\nBoCSIFxJ9A4bukM/t5Np4sLeNKzdB6qzljygJCbeMgJGly830NScLJ2dN5Ve\n4NXQXDhDgCcU1qxdSIiwsdasQX4mmuZTOJZEAmFYv4Ivcgol+BlO+T8MwaQ+\nOMaTLcq+3rGDoqfpD5VLaAXbrU45dK9cPMWTPQb88TJ0QirdCYf55KNxkPDp\nPyCudJtucEwUgTFY4EFh7YQVzjHItEPgg2mXD3ENyhgH2osvDRhVKsXP2bnv\nEUFTkANZ957MMOfo3AVrAPIFoKYS4VnvVLzfrD31hDYVxW/C37sP0zULwYD0\nqaDb6a+0xqmclq5sXDWEPW5oFm5FXFMxSYsjresWzRGOrhlKyR+gDa/LxGAt\n+7K5T7fplNtCCtsnLmUzVy2msZ0Wm0L7KzKzwGE+ktfrU6LmcQaTsUKMdgwA\ng4EnH4VqYzHjjTUs49FX5dKLP1bzWOe7LuJVfPcsuKF5jOpfGeU5sCCeDNxr\n+GKV\r\n=0jvc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEe0EkubBmxkYfqsEDnpAjw8sTlBoQ09sydM1uj8O1jHAiBYrOhUk5dRugzcn7qMWcu4DuCVnH9TLH81RC98wjzGVw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.86ff1b9f.0_1588042528069_0.2015145133710845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/ripple":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NckipKkFYm2NRlXUN1PWzx87Q7BjcrT39Fi6drlvrkLnL/pu15/v3S7PwG/mxQUiB58xzF2tHp7NPByFcVF6FQ==","shasum":"d1440e0d7c978062a74ce20235033952512fcffa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.54a86b20.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BaCRA9TVsSAnZWagAA1jAQAKHQJ7LL1OnaQ4kNdtQ2\nPQ7ML2xH0UWAqVTuuhoKMijBPtCXIxZNhRHDC/vUAAPtn7imaG9iBa8CS8/t\nqXwS4T0zv1DmMhSuoRyYeHGSNKHra9mCMNrFo54pU3frs10aEyhC9GIl2gI9\nWFy75d6zzekqIpoGpy2fBgBVdCVx6iboIk4Rz9rxDe9eEthaRrPFYIc++o2u\nSHnq0aUco8fsKSeDIbpcFnDKra9q2gR8lHargF85F1luGyGmHrLwFprKvqrw\nIJC9C7nm1LWIF4JrBG1sWsR2yH5ik7MTiHs5QDqeYslJcZ8Tli/JPMygKjje\nqgjkFzvOZDusOzImmIDGmh6YX2mvapTtKoKwHG1kIhz8BTRCOCg2aEznpoKF\nWYYlQv7ZZYdg+zq7itDcIODoJ/MXQiKCIeSI5rPmH/kmK1tBnR1vhJTXAbS4\nDlGeffMUcNBEklqk5aWkRznpGRFqW1xgB9qDu+hfICgHZ+h4ihbIPrdkSSqi\nUcL/S2vQztVzbwq7/kX+STT3A+U4/2iG5TYEp1iSDCmSuVvu2hrvgTQDSDz+\nlgy67+5sMUZPLSZ9JZi+j+fZQHRwgDnFs4IvilFdss+27xIUSm7htdvDK2cx\n/Dz2uRTfc2vm+U2MP5MrQX/I+YOGjWwAZmGgr2aCYEGHzSCODuDnPvWdi4zr\nTop1\r\n=xEjD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqJ5C55syUjxl9/go4sF8ssSILbBhzY1u8rTxHdKNqcAiBapUp9UxLPxyOmpeT/YRxdmsOwaA5H4/lMYxhiTlBAmA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.54a86b20.0_1588043866137_0.3590919777649306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/ripple":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xZC5XwgjAH9hvORmsy1yxEMK3Yc6iIlHLX0GMHGeD+vzMQ6olatMvFTPoKXO8PCnGBXxDL1oRjRhiY7lGAq24Q==","shasum":"a9bd2996788affa804f8d166484dc014c27ffb6c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.938fd24b.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilkCRA9TVsSAnZWagAAoXEQAKIf3RymGOj5PkL8YZbh\nyJxwE3OPTZVdE3wJv7+OaXKszdzYvunDJpbXRGWSFU4ul6M1D2CFIxEVPc8Z\nt8aEJOSVweKMm4MuZBrcRfZznBScn8bkw8ynVkbntdlWRcdxw29QO58aA/wX\nhu6SUwXB/dgRGRIavESIiH/OaF5v3sZ5a59JHYy4tA+YyKeYJIUWHbs8r39c\n7ZYGCoYtaAg1vCBu6xONcPWATt7Jdh9WJpHwL0P/M7Lba0M5/JKMEBQtYu2K\nYev7ZHNoZakOylH6ykRbtowCZ4z9ULipN7cX7rw9NXo+U64oWQUj8HWpjU13\nLTweyeflBQT/JQQgPzutNXm8/cTwJvgAzVauuJdFjeHs0XIVTizb0L+xfk6R\nfipwtcxDPuNSeBKEAIlknGLsmSrJC63FmLywJM2eM0PDSaI0InCWpV3c7iqP\nDxixX6QO50nXbJMf1RMOgo14Z2ZW12KuwOdOLyEnjHBmyFI1ZhYGc1/IQ3O3\np3ub0KWKhuXiidKoQ+rMSmBb9mHICTu0ufLQ8qUVI/buMGYvB1/6Xby/lFfr\nGw0heBxvLtnn1ZM8S1KXZRjpNyRSFeuo0Tmfn9RwMOnA1+p+mTAYYWL9hK4B\n+7TDurXfR67Hh5pHDbZbYJ+9Pd+9Q349wAuGVxZdrfm3g6CFXusKexY+IEc1\ncXvh\r\n=qOai\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCphOQQwAabS04CHb6xE/2CQuWpHy/FeRYNKGwU/KoXrwIgQCffmj/chB4gPuOP63iKLcrzwi/12vQE07mq4q/9grs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.938fd24b.0_1588210020617_0.16024628625198445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/ripple":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aa+97aJKHfR3szNVELBqkff8iBaU2JHUMX16aIK9SlAOX91/1mZi+ijWly3igx/mAWVMGJ+Dj4YIWmx1UiPNng==","shasum":"98368886de4936dd995a714d749b01d488cee21c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.39e9a008.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQ4CRA9TVsSAnZWagAAO4MP/1r0Edo7JNEaalXwa/5m\nPLdGrlnjTLqPFHoA2bMQtP+lRM5UxqlnodPzM6aJkH7wW/rLsSXnA/mbT4Wr\nuec82gtkBPz5MLFGX9plGMBd6TzMfdEYdZxvSAHLcJRZQrYbzWgQdrNKQKYS\nZHy5nKRMBRFeZidfcf0Pg5YC1LPpFMI7WgPHrbGMljkKN6gMP/w+b+bUzanV\nTGXjx/h2q40e3x+Eu5jdYvLU1YZFAAPM9qpSxUvsH7M+KMDt8Q8mAOyotIT4\n8PiOvZSXpuETSfh0qiAdtqW0Hir1C3tRWBy2rKM1jvzHg/5JWFKFNg9a5gXG\ngRNTO0P1KbuW1R74UB/QFyKMXnphoBZEpNRAZ7TcHpFBhUuuK3Vrz0X6q/gm\nUGCF4ZRvaLP9Bf6tzYeZHcelgmHf1a75SO1PJNSTlx1+HmgBLbeaH7II99C3\nmsb19p7b2E8Msr0x26k7xuBXorYPkwk8Fu8WDujfVlyklvKAFQ0bAhpXkDMx\npM3ABS3aCNnCE/9GGY0rzz8PlQmB8yvORfmSP4PwBlz/cc0Vp59xvguNw31g\nsC9i+0pisAuiywPCeYfo4tkHjH7Pmz0gAHbciLT7xMMb2X8nEEmy1PhM2wQW\nosihCzB0mdHbUEcBLSK2X9bo0DEIFi5oqo7CUZYQqbJ4vRQohLBPrmuICElw\n4GW6\r\n=DYQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5p+ZycqEUrkfgQixU4TzwIzxiS944hXzrsBDnk4te8AiEA8IVfaSt8zPN2C+bRs5tW30dOxofu20zpbhqVCtrjasQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.39e9a008.0_1588212791829_0.13629190522092438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/ripple":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/mXKQGeQcRnq0/whr4cX1GZv/C6JPJLGzAQKo6sm0qSxD0EEVGYt7eXjAyAqrrlOsdqDa2r+1SYQBGAPtBDqsA==","shasum":"04e296b7abda181f998d238bf345c045aa96ed2e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.f3b365de.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovPCRA9TVsSAnZWagAAr+sP/jAnomziUXoeHYlV5TIr\nGiK1kSbBd/pyITuTOHuetNKZYUMoQvLUS5XA61dz55aUKwQtmTj5Q3hYD/bx\n9UZwTcPPLegKn2VRgnNseVahUu7YIceqjWavXaOX7imzSsg7HurWOWwy5WGs\ncqiK7b2VqnJGO1i0Akhnh2/XeebQct6Tu3JxpSd+KtIKJWYAxXEkd24n+O+9\nwFR7uTNgWl3E1IU0644nJoA/dwIygMSkp+oFR9UhNpt5VVGb9EY7PIzACax3\nDhuwHMMw8YwPUs7jDazX5/aKBANnlWcFjmFviR56AWLH1L5QwUF1GREEkQ8G\ncjvJpJ/cLnJasg1vmpgHk2EHjtsdfuZesyP+1/x59/vMJIL3dOzwmfJ9R9PY\nPywBi47x9S90FQSOp42H0sAbsDcMvoNHQTSG/Ey16sMgnSfY0mOerUbdV1BU\nTnHkFV4p31oXHdsaqTJGC7anTX3u4psleXksiYeyqnXVaK9fSjfrgpWkPVp5\n3LOiIML/CN5lTyvc2iFCtHu3PAmQXeYLbQjB8wzl7NV3hetWCHbbf4IeLqLn\nIZlVs/zZcQ/H2ZOPokM92MrlAUIQh18NMvmvthaHO9ooyiwWy4hlVTfeTXme\noGkgKiJQ1+xyd6Qzzew2wGvhhyFljRxjSFSX42m5LQ7H5MGoDSw9JVmYcUGi\nB3wK\r\n=Zxfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICt9BaW0kXPJgXzWb0DFv7ccw8suOdWO2HrqOeoi+KHsAiALTF779T+FlzW9eypr8J0qAM+n7GCaeuYOSFfq22GbHQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.f3b365de.0_1588235214616_0.7694736432530955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/ripple":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SsOOU5xoyiXUmgT3gvkTzUvj+7WnlcqRxWX95PFLC3AGLTiAbjt+OdiiODsercmipNp1dQsTkzRxeP/V768lTQ==","shasum":"c7cdd57336e0adcea47a7be9521719bf193b2fa9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.cdbdf807.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nlCRA9TVsSAnZWagAAT3YQAIH+z+m4+YQVw8ZlP9vp\njp626JWB8HuqQ7WclMRUT+zaokUSRcKtZGj3vAbgzSLn8co5sV4hB6nYI9Np\nUwuhdcJ45YLPv1KJQ/7hQfZsI7JXbX/vME/8tOzk5WegBos1gVRTntp6n/bF\nR2dnGJIs830O+x44Em41NIOC+bjIP8KjnoWblYrEYE6cr4Z90lAoFB6D5brH\nFxZvV+wkBb04y8ZsQibK+bCy2dsSk2+coFv+WPqWLaeqZcbaqUbwU1ST6wH+\nBrmNoTsu6jQ4TSFu8Vv0evqhOZVTeQsO5bE4Rm+7y1qtw754Jgk3qveKLki3\nisEMPU2NYC5V4VgNlOtVQtPapIeAELDWsT18FvYN6rX39MDwFI+MHGBcDGuG\nIw+MtWHL7NRftq5CFK9GKZV5ttkJ8b8T6ttm3mCZW3RjExHjkjdi5emxhWpa\nbyoGu2PRYbW6i/HtERF6kQNHdeXM8Hvdt2z7GYTTWu9nSNfa7hWLiCPNSnrq\n4qXBKC48W1SfPkqqQCvg77xo32h2AjoEDtlAX4DyHdrf/LHrTr0gV1zaT58h\nObqGgb/UwGAwM8TjY+I8nNabyZV+qGgiBguEpuxEE31Wd0m4d2OzTyvof6Li\nv8PSIvNpospbbqWTqc9hN6E2Q8z8BXp8cDapl1mgRtCSypLNT4LtpcfqBkcK\nPFZ4\r\n=4bZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoKPfqyVbHMCZfmp0QKAxdIKxBOilFKECXVPOxbgXdnAiEAgVWMUYAeBxnkO0R0mR7h+ltmr3IDYlH4CRfKwv4+yS8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.cdbdf807.0_1588292069025_0.47261885888050115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/ripple":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ff+7XiH0OdoQTsiHoLB6YrgWlzF+sh5EEmxVLxzXU0aHMsAkvlUwqcO4M8Z6yemlC92PF1CWityx5MLvjJ8+uw==","shasum":"814055ae8b6c8f6dc88f26c620ca003d76870fa0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.9995ae17.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4fCRA9TVsSAnZWagAAjUUP/2SRflAX80LXWk7xn3Ei\nqvDJkQgIvq+nUvUllT8VyoQpZLhU2mRXnBACCIGc1/QAXbzjUqpfbitO3JfG\nVLUPDyVsHmsIcvUf/QxyJWvbe3X3CHmm9N77uUsU2Ujbcf5ofxeqruzImBzd\nz0fHWhFo1IO3jfV/08wAz7qEnit0IFDX5ofQF0ADjwbUyNW8m071RSeSVekO\nzgfNfuN4BPJ68lQJvI4wvLL1D6Hce3FzT09qy+l1MvEOPtkMHm1SfR7tIZD0\nxbTZWkp/kzPf4nw7ekytwmktp9FhY/IYki1LMP1KHAepz6U8ySAeM3aVcwjR\n5tdEzMutWZt6NqYMDOiAB/Eg8E5+bE7efh/4RNWNlCRzzpNqg/aHDx5knvle\njoOu0FhmIsk8HZmuPa19K3Zj0Cn5I1Pre7eYFw76puN6w9U+5YxFLOdJMzXN\n19LaRkVafroeGhL8MgN0mDPVZYTrVGKgSo4gShikRXeQjl6bqxYIWlLz6g4l\n0FWSXB6+cLnu1DIBHp1JaUpFhJoYX93zO5lZ6XEU9g7WWJQjvahHrKGRBmT9\nHcT4GlwjMRAsHZOvRuY6ZP7At3uTmcJY5WTKKaDZHGXkedwmYb2W4TmHzFw6\nAOzppLrz8W5+yGJ2QXyMsbSiWzURwgcvFcXBLhHNboutc67XUm57KZ8b9YEf\nMrUw\r\n=tA0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiLk3GIVabjiC5CsGuvPGbn4juxRma8RgrHIncHvzsmAIhANLsXxPjUwrawcofsheCuSpHOdXGZfyEqIjVFisilnRI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.9995ae17.0_1588358686818_0.7997259883113466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/ripple":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SJnSgfA92+uX6b1GurFUfoLgbY/293NUwR9kobW7mD2C5pYlDp3cwgT1CurlfAlhdIKm9ivM+EmQuS2hip2B4Q==","shasum":"5bbe27b41b5f592db5dc72a36f14e0b463a1ad09","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.457bf035.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuaCRA9TVsSAnZWagAACygP/06e8k7DK4Pq3qYfj+vx\nxmCh8CsiZRIVqliWVVhnSCmLD4AF4w/7ywkLaHoxbywvq5n9LhwVQk9nuboe\nkRevdaPqtv+E2kh3DO/LQNEclqKTshIJe7xSjnv0bJpyus6qGOp5r6TOP7sN\nU+yv03BV4PthIgDWnbXDfdFbwVtHigAQqqL+xaT7Xwy/x26Xf+5hYDrthjL3\n7XUMZ2DbgwognBscus1gsnrAP97Fi5iFSWwxtSU/6nAkc+BVct6CfnI32DiM\nWs8FBV+mXu2gfxdrxamNTV+cTxGQbz8tULYt5KRjeZx5gvT2gSDpeXHWv+M+\noo3hx7+FQFrSd7M62odmhdOqnkJ9mfKcEJM/9FfLfMxyi7F35zMzuZMsXLgs\n3bKXHHB1tFPFWducbo503oFNlfgW4FMG+2JliXSQMuKrSECuB7bf8Jh6Khxs\nAVG8vYgYPmEKcj+5lmy+vgzKq2N0qkaNxNN/UroE1ohX5tC0Mq8oXHiHCjWF\nyFhWKU+mr1QUuV+K1zqp0FJgIn5FZYqeAT23zMTUtjCga3cRFOE097ggWk3J\nV0GILA/ZIBqDqi7OMJc38POOW0mpPueZY4+XEdYXhINVixrhHCFRm9u4i/Ui\nJvj/7j7OGhSk6/HvyinpRUdok2YZhGO+jABNEpDXR4H802lyX4yx87qvYVsf\n9t5T\r\n=y8u8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEYZ3U6XlHyHpajk4mUjmb2JrkljaIBsn6W6Bp6htucAiAUJyjvX+9JZmBiYiC8Jp/pIceBMTc6L5nz5V/wSVQLfw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.457bf035.0_1588366234232_0.1315565283587501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/ripple":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Unt5Ao4H2uDLO3D7v88S/t0+FcKIPkN8LTiq9Fzv4IOmMffjeF86PR6IcSVkqPGgrhfpLghTWAIhcnQza128Zw==","shasum":"a5fd9f36f699d649ab9fdba40e35617991c1c8ec","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.2381fd02.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJO5CRA9TVsSAnZWagAAAlgP/jHEsPQT4fFFZGGq59t+\nXDCH/iJp7Ld+APftDM7NbQ2mUJbPlLHG/35maZPd7iqkwaueRHT4ZpKPNJh5\nSU2XGxbGs3MqADZjLPeyJ8EN91hRgCd1NaCUzG3876xUrddrGtBub09zu9vg\nq9I1DGlGX70PZYY5l73gCS3e1g57kd71jneVyTp+X05+xF4+kbZ7jGIuMz/7\nEyW1yVqIn2hLEBKZyVr5VFgefuQ8zFJXzCjtmCRYAZQDrSqhOky5b2aPqyva\nDNDb16bMGLZAB5qj5Y6n9wPUv9Z2iWh5BdjGgOnAt58w0jlZi1R0AHp5DGUM\nN15PYdMoMvFrV/WQaRBUl8jY3JpqZPkC411zKlTMM/AejYtXg3JaprLq/cax\nmiiz1M0Nfg4FmxJDEyYxhbsq8tb3ndFlY2PG9sqbUHNNIvOL3RwMHKiHcncD\nrWOXObV5A50nur6mIsxC3NFP9Y1gRPoSDnU+UmoMaeM1CFbv+rR8HtXJV2VN\npLZ07b1GMkhylhyeaGlUn/BLoq7kyN8ADD64C1ds1MpNTPlV0FhJBdvaCUuA\nEkFYJjWpyuaGYDUfNLJXj0LjKpayK2agENqUJvIm2HhCw+2EYMYGLm9/EAbf\nBv2RgIOJb2h1iNnXukcY1L5QcNArulVY8k9sl9ctOdgWzHKuBufaMHldpBZY\nvTXh\r\n=Ua/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6T0zwxpUX2znyfOWBA0A0hUJ7OjFjhK7TBMJ+41EXEAiEAu2RYyRF3NeE1UVUHr59g+O32obkM9QpuSm9soTVcj98="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.2381fd02.0_1588368313283_0.7904722997501621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/ripple":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uXxvXYxGA/vBkS0T2b0KB4udysA5XzFwFQmlvEINAm7qSCBOhRGiGGOzndloMSk0++y52YbV2R9Ee57iK7Rmlw==","shasum":"c4d7468b5a70e71c348c701bf7270da8a7fa8d19","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.b2ca9b57.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJYwCRA9TVsSAnZWagAAjwcP/06+QZxaABCbzDh5eJe8\nMDL2ynwH+zQ3qYnCDGhwCd6BWU3MvsZwuH833E0fpcEMhgMUmLSlb0kDZfLg\npywMosJ8V5gaLA/KK5w+sZQ/Omx2LY8H4UEJS38lnKJemy4xPnrty/q0SiFq\nCp2kKJyiXALFTvAMMSv78Zd6L3UlzeAT4kY2oyolQ5qZ/QEO6EurUQa0ujRS\neAPXFGSbSOPJ0Z0OuTlHBQFknyabVnkl25RBOwQQQ+yafwsC+hEQ2xqarB7v\nMdI0nmmc3AqP2Bi0t9b+tO5fF/XXZNpQoOUaVEpXTTQj1rTNQqu51m4s7aPq\nH9occ/ujtYO1Qg332cPdCp17SybMEHjSmpCjk9+y8edLiRzCEQVi6wEW1MJ8\n9UMQ3P/g9vbF4gRLJ6gVfGrj4o114JsLtb2f7ySyB5VHl3J6VU1XX7TEaDgO\nhzXumHiJWNSKMp3tz6WVA1tc6lMcedQvV0y3HqhG4tAdAYZBCtv0E5XxAb49\n/uRTRWvhb8aWUxlmmAdPk749TRHSCzXUX6oJ3BB0OtBM+rRn/uDDRjb1IzSd\ntW9kBnlsLXNKBhv1aYxcqeiTRwockIkRUOO3qxGNkW1Dc90zYPdIAeJutmM1\n6PMhE+IE6ADg+p227ndmvcEnBzLkfJOoHPKwdvwpGTVA6wFFHz2PiIONXKZh\nPxX9\r\n=30/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKAd85/kIHegE51/PGsyH2Vym61jmyZEcTnfYU5mUxMgIhANYNSYVDsrC9OlmiMwRWSiIexZlChPgXGf54WkngSfiZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.b2ca9b57.0_1588368944029_0.5822882247153096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/ripple":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sVd/3BretzjNCWsqlK3mKDhhPEoG5mMFuNDSSVKetHsK6HVglSWJ09iyuCcFePTGjojyApBqNZvGwCKeSqo+IA==","shasum":"5aaa3d6b5ca068a23eae47c48b1e6a4340920ae4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.b2b088e7.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKOzCRA9TVsSAnZWagAAqSUP/A29OWUy0Dw/elDGOZOn\nmETR8VEdz5TwHTB3U3IB/Q1njpalfnYo1nh13P9uuU0IwXmzpplwU8QBVH9g\nCuH4q/fXmyMGZhSDZbAMemuKBRgNy6veWHihQKqc9xmO8rRbpPFbq6fHkjw/\nk85AugfVlDoQIkAn+nQ6U63pWXYjLk/bBUetfc3s4TqxCqprSk1G8Ugs5WQ9\nQFjvmKBxQWIF3nR+Xrb1rf/HYa7w/3m93mAjHhvyJWmCj98FUuNViZRqiU3M\njqQS/44aeWo3Bb96zZBQZ17VcIja5+zyO81ln9MO4Wq25c29JaDHd0phibJP\n3FC4gWHvFMCTRQaHS4fMQbP5houTY6FgYj2pvorWYaeOiwOtzPO6cSpGvZ/u\nW8ufjZ03mb+zCmQ/7wI6Dp79sEd9UtHGvyYxrO6jg52wTzZWcYyJoLqwUJXE\n+3NxfTUKE5OLLtR2cp27IPxqfgPFPbpfMok1wHYcIfmd5CivAo/gUsjNi8RY\npi878UWLlf4iuomnWOElv0AXzTmojeUqnwz6fW97eTOpCD1C+AxqR3MbE+4b\nvz+TBlgdZHdJAeWAZ4QfOOLT8ND+JG4ckggVYVYm2g4Kjhm1VNgh9DM4xWaY\ni3Mus+BGaKzQf8ZTTyBipmsFusFPELpqA68s4qq2gG1kmFUlXvbcIlDlPF/y\nT/ok\r\n=XMQ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7dRqMemR1H6Q36QBtZDljErp8ZXKzRmZZdsGypWfGgAiBPHcxl0qcIeFqWvCnTgjVTQSicJza54FpHiV+a75+JbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.b2b088e7.0_1588372403410_0.06665914805332496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/ripple":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-adbt2g3ZZajUfv6PbQgub/tg3SmvQmoqSdbKWjs1KRwdkBHAK+P6+ZV8n7xThS8TZ1qXWvzgvxTXZWmQ+Jsaiw==","shasum":"42cbab88eaf827371f1a42389304d4e05067edcc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.fdd8f69e.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvRCRA9TVsSAnZWagAAoWAP/1hK6KSPy7CsJ+LQyInO\nHWEl9No3msv2Ts9VKdssUMK4PEwdvuEY6kDKmIFQMrX18W/xf9cw4PuMnOoU\nKzJ3E54MGr33GR2+Pn4chxThj/ZoG55EVnyfabgDCniblXNZU5XczOLm5EYa\ndG3Kx632K2x+ecO0oVZTZrdmm87NPY+O9zgHVt447n2mBDjHL0UBdDJWN4pU\nvypCimDqn9xZpTNzuEX3lsTB1IJj70N2FpSei6Mv4P24OSDSfj+YnNdb4Hnf\nwwqC8wP8vuJ1MweS0IqqQW33rudIY1ATYPqqJBgmely6RzwgjZdZU/KoaN2V\n9nG4k9JfJTvdNuKw+fhfObIBuNyQ2DE6xw+HGAS79GS8nYvfKBGOLMfZ319H\naPWxktEr7cH4BfMtYlSCS6x6S8PEZPvkGWYzyXWVd2bVTWZgrFcZD3H+wdDc\natKeKxXkpCB90Wz1/HkxevrPpsKdiocKnQRV8Uwy/tt08xlkytkyCMEq3wcy\n3hpNnBlMfCiH9LavHvr6ddkzuiIaGvll4RtEa3JrkXp1w7Wd/Rk4OrzcokNi\nlWWulMn81Mtp/1bg7LZpYZSdjD0Ovvy7yC7acHrWGau1o/nuVMvo4bXURrb9\neI+aga2/B+jS4wv5CIvtOzwswOY5GJ+XUS1tKPgm5WerkT0lui9kE6pr/ykK\nivXP\r\n=+oy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQ2nh1T61QIh4pgre6r63q76JEldzsxhl2zG0AdOI8CAiEAuRe9gJb1u0Q1WTIThp9UIVs9eXUdYPm1KmBAGIBBUQw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.fdd8f69e.0_1588378577255_0.6650062417540499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/ripple":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MTw0iT84vBD5r0oGlRhwn37LKodlYRztqd01xnWuunznqe7Jf/0QyZTq8TFEpCwJenKHLqj8sN+mWSdssQNdNg==","shasum":"9b948f8db931c592b2b83b0435ae50445889befa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.730f45a8.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery02CRA9TVsSAnZWagAAbj8P/2Pgmr0qeGHpHKwCvz8f\nhUfPk1ew5S6K5a0B8j70DSjnQ/ycmKxVdu68zhHnnddawY5VjJ2DV3mhWEwo\n1hdKsCQaHOpodGILNzRbYIccy364hg6ftrUCouRjt0aFVRzieUs7zLKS127/\nra1bGIYef0PW85yFckpeLf8uX7MxqJvxJ8H3v0dG2089I5KKdmYiS0gd8W3t\n5h8ZnABejrFz8BEqP99Sjwq5y36YqEweG+vunl+7NDnmTIGnyLQS+XTVKVmu\n57ELXtAoWHXDERVzb/wL75GIMIL6gujs1Ks9Cyv0XKQXETGkk9b3tuSkCbog\nQz+hzY+4rmvokC7QW2VTs5rGd3bUOKh394VzqlN/yY+whMEtQJquhVo/LCv3\nudUQD450xfnM2lV5EzsDoKwyDCeDiBZL6b4OGbGTDLv+5MM5vxAg19vBlppi\nwD1yVanj0ZbL0sJ7F3jVegpFKc9uU8zJG5ObKagiANja6a4FVg9b348QNJiq\nYEj9j63W11ZuqoriNq38EfBZvQF0elYGI8GrlTdqyhWT4ZvCxG7ahWQwS1si\nh4/ulPr201ow3ip6ongwM9rnYi9xcve580SoxRQ2PHPtJnT6PGJXwpI8G4Sr\nksfBFjV/E0MoO724/GCXqc3/UqK2izEjcF2Jc/C6a+/MSYHhFVc7EUZPcCIb\nzZCM\r\n=m8dr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRvDPk18xYCeQ12mwKuIZ46kbPed/KJVJByNDmlYsZ5AiAfKqIYihqYUnb73s3T0BllJaTkhgkQGoKjdeO00ViV1A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.730f45a8.0_1588538678067_0.44450447257516035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/ripple":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FE/48UZdhrFpbzPAE9WdD83Bl83XKBt23l4fwdBsXIgOQcDeDPicKNu4OXkbtLBxobmksGMHN9U2I+Rs5YbErg==","shasum":"b1aab556743d912cd951e145b20ccd81d1e59b26","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.4219bd20.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXgCRA9TVsSAnZWagAAAkUQAJMQteofSLn9G73mPz6Z\nW2JOqVEJK7cHzztXnek4ykPFJ0BUXQ20DHOT4LeNCAWzOZNnDWhxXGhxZoOK\nKcbaSZnO7kOv4U3Ekd1Dg7ynRvgnictlY7j1TGliNz4nAb9gkOqy9yNmhao2\nbb8pYD2ugD5zrl/Q8eW2Fi95bTZ1n5zCaGn5QbY4z+lfMawrkB2ig3T4Fh9e\nhLChFXglfGwnMdI+J9C5bb9n/FjwT3dNRNh5b1Pcu5jR/XyssTKXUSOXGDjB\nRe5v5VGGw7Q0+kgXQWBQ1hHw9DR5UAvSRoZ6prBtiF8dE2WS4EG7nBOT0PT4\nUDd7R0fh20s2fquACUOPBMyHyg8kzZIcd5wEIKurAUpaB7INuCLrSysCEN5D\nutpCscZxfptckf4vyyhud6EGE2ce1e0xbrC+7jogNlieHP4dTqg8theO9jiR\npvamT79HIeZH2jucmFaxNwW6CQQjyd7R6mzsxoXpzl3Y0X63PWEvs7DnaVfC\nbvauwg42ffTY6yTybFfa37i632uwKfh/1UOJqga1KInk8KOyNfP3o7R95mvG\nL1kD9RxCLYACuqLup+vLH5S80d+RH0mqaQcqpxfX+wcbEaKnqjTZ3JAUrdF6\n+CFT+Q9vgLgijesgNuGTv8zkRKfC+5AuMOWBZk1a0ZBpG/vhQd8jklW1Mmp4\niIIA\r\n=zfvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyksSWvhnsulu93Mc/ZIPYfj/LYDa/NqUGh0QJ1sIbvQIgMwkSwujzVmssUPsM16tzAqxOZK6ehwBov4Tkup8Hw7E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.4219bd20.0_1588635104002_0.29641340865353505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/ripple":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kvJb7nc3+ENZPPpBB3eQLVyGKleoDGJyupr1n+UAk3kF2xWaAQDH9gXOwf30Vw2GH7o5d9TWqjcbtEdBsSXXqA==","shasum":"559351c054aaf907f7f837d5bab73780788d0e03","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.1d83cf6d.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5XCRA9TVsSAnZWagAAYFkP/0b1Saa/sErqr3TQc6Ng\n6+/AG7nI1LYe8evxGsGP2c8XmZbn2gQ5svjREJWeh+S0VwFnfYczejyN0RAh\norkhFyY98XOVEHIiTcRRxLfT6VBj5NR1MBPwy4GHgmjyRa51q7q5JFORcHpS\n4OHYRft04jLh7KQTA9oX+GtwdPOdG24c7Opp327KbIy9tX2umyqo9qK+toS3\n9Avi5jiv2K1hX5bjlAxy971wR8utCVT70GSB65M6DKvJJiutL/g9orIeEKMP\n/l67Zn2samVACcw4vzDnXfNxPlh7ZZf9m4mhAQJt4Y13ns1Chej0eNvNlFai\njon0snlcA7X95nRU++XicdqmxolBEmqZYvQH+Pl8gaDkDVfoWYkLtqhB6YPq\nll0b2gVYgZuJ/5OwPEex+saZgDloYh+IHeBUlqLWHxERhaX0ydsorlRyarYn\n5xK/VIlrCys2yWeZBrskIYE3pyiJluUHS1Zb4BEDfdplJwtUf5+Ml4x2QGdo\n5QtWcl9cExTEZZk1qzkQrCXlUE+S+z3TNpiUXf7zDGiPrdjEoKVxzC3d69MI\njOnTDYSwFu/gWbh0G2fViufCm0cO587ZYR69ykDcM/r3FuajeOAhBI/nQQdu\nRiYgXdkMNky8GH6VU37Aw8UsrS4qqf3rznVCCxhFHUeEeRCBdlfgf5HysMnc\nEaKI\r\n=pktX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrqpuZH0QlRNYotWQ0XswxrRYZSF/OIrouSoCQtvrGNAIhAPvRnBsp1Kd/9DELhfybiFlLTt0CtMuj5zAlK1kthsiF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.1d83cf6d.0_1588698710937_0.00819677959997045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/ripple":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WTRo+xTmSg0js9D4+kikJXjwQVHnQjO0my5J8bryQCiH0z+nMLwHiIHjCM3UoviqLoLfNr+4XQbiACZLZh+gjg==","shasum":"80041ad5af653620f26dc3c03a512b030cc53c02","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0-canary.3bfc63aa.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazKCRA9TVsSAnZWagAAuY4P/iN26/8TACqUTo6nYHXX\nGskNIE+Tryd5uXwl0IG7QVrZoC/4W1m+GUU7jqimLie8yAdvYirkgIaiH69L\nuA3RfPP9Po/Ny8kWngTX8Nb4NQ+6Q0saXXzQPDaZvmz2rI4IURHG9rNrLycQ\narxgHG1aWCvnFhbM3VeMrxvGogaxi3MLvbLJSIYBxJECUnFhcVxvY0FvxzXr\ne001mNjGs8QygQNT5R0fNzlUHKuE2zTgzbvNJUxQgMFw7bTsEk8FA76y4/cF\nu1kimdQwllyvlzEIalqcZSXm2ER/yCgQCT3Dk/bPuas0sNIGSTijUQUxau0k\nrTsTKwDlNZ1REe+4puIZMnjqNa9xKjXGKw7rEumrWTi5XUnojyQUy/1KDIyg\n4GkXFU+XhcMrf/Lkc6Is3ijGdQfiXx8ahJAB/UJbe4e/5SG7I6/WHQCnwFit\nwHXNFBEYkmEusbRHX6WHi95NL3NE0Wh86tnRlW9suS4LCNQN5FfShv86B+gU\n9F4rCgowy8O7j/8jgpLKFDU6SlmPEqnPwKYMpz2RLJTjM4HflTEtRhtEv4dU\nKl6v8yiQLFtYRTn2PRWsnNmiQUY/UVcrxrOvbqap0Hwm/rJLK3WEF4iqGMCy\n8IcCQ22P0sHLLZtnEishEHgYegUWaMuZcoONshVIWqk9QGDGm+i6/OyvNNjU\nAXMe\r\n=VmE0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX3yTMrUTDcPoGq/97CZh8LEpAnNgncwPC3x8Ao6IoKgIhAO+zWNTKdIpKgkGphy5kUVIQzrz5M+hPScVkq7jU8zo1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0-canary.3bfc63aa.0_1588702409352_0.8271594930912218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/ripple":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","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-ripple@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-3elf4ysHoURfdoWRle/0zQ2l7OUSWE7Ah73B/PYr/DgHISmYYUjg2k/K5NSro9UcmshAVnppIujlcZN3GbQIyA==","shasum":"ec451c85671573d42cda9745847b922b053f83f2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.15.0.tgz","fileCount":29,"unpackedSize":109665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepUCRA9TVsSAnZWagAAOBgP/36znX9hcNBt130Xt3TX\ndxHgZSD9c7Q0qbfPwfjaPy4523H2GW7ndMNyv0DMGaWKut8aT5E3N82EjtB+\nBKg86+VcF0C9DWeZyFOeNaqf6V1cUNFiK2A2itzRfLn/Ycjmze4pAsxxYLXd\nMaAnV2kp04IgSipe3+rkZnz6UyGU32R7aL9yZfKo/V9K7tog2F2gnQ2yxbsC\n6Q1BX/LHDeghm+suiKRxCFF5JFTlj+RiDcVmNVmoTkh0Z4TAaR9AZqacsUxQ\npIfJ8grJHKwR/1kwcq1qgvD2N6DpG8fxK2NowoapOjMFBIauuAxYmLvx/azh\nRljkWfi+POSctNZTVIq6t/N61W9cv8IaxcqCI6pWcQsevRunHjpqrpvyswqX\n9PiMK/7/4572bO7sB5lXCAoL+T8fEb1IDbubyi5T8uCadCwglweSt80UDfUB\ntDEpErgVqETkkUuFdOK/v9iAK3H2TQPluUb0z1ZP+Ew1kQ1ZwM8Y1wNASnQI\nVUK+EDfO/v7zTPVKc97NuCtOhDBhK1mI0ElagNTOrSqACidxhvcY2SpfZZbx\n0bV6gv+gIjfpRZGD+sDhEbuPyE1tlAezuKmAgYCAQnCcEv2hrO6VV6FuyLVg\nVR3dc2rRu2AZNbywHdtG9M71TT76BfYFnoWH7nEF2cUqJZcsfiQ4U1U+6vIz\ncTAl\r\n=6Cq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM+3sn9IrOB0jHn4n2nnv9czEfC8a6LL9WInsRSU9UKwIhAIRkT6BMMNA7CdxDAwmQ7KtaAzzF16A/nwXDlinMfS0O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.15.0_1588718163606_0.5228433505797048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/ripple":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2C3tbn55hOpZuA5e3bfEaBYKTb42EwZbcn0CKp8yaaXh/4oAc3QjgrHp7xxEvDw0J/Co4nRcFZt92Xgutou0Og==","shasum":"d34b6c54a8dce385f2b8b3f5f4c05c58b0b9b16a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRdCRA9TVsSAnZWagAAe04QAKFtl31NYzJJL/z4S45+\nnTDdVyIBo727ieAyVCIrMk+ebYNg/dBHXjdnqyfx2+dZKei58uFroHCdvPc2\nGgxJooglHHdpKYeGgn3MsH0WHKIz9qtjct7C7MIIvezq6ko+VxxXioO+7T4l\n0J7jNUftXJOmrE7tsWAB7kS7rDXAIFVA89uJXmwhUlZsLdc+cp6QJcOeFq5k\nYliGpU//VRBkU9N1lwkzEcUYHOw7oPE8nRUNEH3tDT3Re+LELb5fVDeJwaYr\nrLkn6+ct25eevpMaEnlAjAPlUFtrCOfiW9MdcvxcJaAFIRzDjaFRhBPsZbJu\nHmM1GqmHSWuNUhxu7NxvgbXP3VqmCuIcOyDZYyBW5Ijych6r3I5bji3RO8LL\nCecHR0dpSnajMNjJEGJWATAD155nZb6AF6pNKUyuY21S0QBhGGlqu3Cx/0DX\nZLPDIfO2pnWx5LAzzI0FzltzS0r5Ilz5pB8Uw+63jq0UFrmryaHo25xP5iJQ\nbq3x4d2DCPJdVQrR2xWMo2U74yrWhT+BtuvC+rKm0DEnwnAKGvmJnnM+y6Aq\n6htk2F/TA1nXpIXjJX9BqJxBzUu7KvxHmAaYIsoWJJOo4c0pD8E6OLv/giLb\nRczoS6O/Lukts1BG2D7zk5/Zyy/X037QnqJl0pBPv9ZOhbYfS6zGPHYEZoys\n2s7t\r\n=P48j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcMHGgNiROQholyl9Tcuv9benDs4DhHLz4aCwgEerZ8gIhAP1fjMma47oac4QpvTo/DHeHBnj/VNhsIL+jlEVMNU4b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.1f4e3d1c.0_1588802653089_0.45855921127950605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/ripple":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RqzIaJGl0pBDnUhCzM02MfNxAUoLk9aeYOp6wpXQ5eokFWP4VfZIy8GsPt5mbtexSa52T0K9Gdy8AEo6TZTLnw==","shasum":"1b0ccd2a1bba4036866e72c4ae7304c9f67bd4b0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.bc8759d5.0.tgz","fileCount":29,"unpackedSize":109700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZSCRA9TVsSAnZWagAAqeUP+QBEqewOYc8HEp0wjC6e\ncwJCNZYfEuQetl1ufgGWK9Eu34+M7x0NtxBfIosEuAcEcsBkL1xWjX57QCag\nY6U5N0gYhUc1JMjNU0jsROL92xkgq386uGoDMMF9gSXzEAjDcNfs/vmE56vB\nuRnJ5H3LtkoZar0sdj+bsWPH9mKWxKgT26ozWiLj1MpH3feHd7HFUf1RAsnF\ndRo5jDn1VD4AlyDmo8EQunlFCKzfcAocYsrumPNLJJ4F1jJTV9gGUPq7p5Qi\neb1FjI7FkmNaXV5LJhocj5ggozyjW8zzDXPVs3AA7JmKEjCHSMTCVWAtkhR3\npSHzKf5aFAtXJTMjK7Jczv7IzVsIebzNJTXcJQX9iVXmD93xDe+aYEINxcTY\nePy4ajulmiBZEDHv+XYdf0YNSvPucR1Oqo/PpZQ0ENnQCxF3QVcfLXrwTV+n\nNxj9f9Kh9FHSl+n9T9JBFabytmCULmkl6FF7MhvkRuBWboEX4KlbGGmCwisE\nAxgGXWvJ2go659OM7PAmg9oMMKKIjUX7mIntIohY1o0d8MC7MNxzhgJ/NG5x\n4fDlSaR8OY4a4fNsKvj4r7TQjFahyvx6ngJX7rXpKuo0Jk7beYY6oiNyVqG1\nrRMoYaBg0jAApubInPVYzgzuWdcqGG7OLP97GpLNzUdoddgRwyMIWg9qJg7x\nt0LH\r\n=xKYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXUpQgiInuQF9dk8gLRuAWM0DPm4kxA2Lp6b90GYFDsAiEAvt+PGlXz0rLt19ltDVmbOpsrMsjbkW9noPiujlm7iKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.bc8759d5.0_1588893265739_0.1106605689116873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/ripple":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MmMPc0GeI+583BwtSUpRV0K2AwofaC+dry5KJEcZeDUb/cq3KdZrQqcem2Tq5FZNXOvyE0GEwh7QXywk5a14FQ==","shasum":"b58c0c4593326ab72b6b86bb562d7909f3a5b4dc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.d1379acf.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmtCRA9TVsSAnZWagAAlF4QAJf6qyCvn5Vfj66KIpxA\nOuVoaDdNaAgfBy9yxxTjUu0f8IHX+sx2rHBQr9gYi+EnNH0nOcaF5mkc5Xup\nc1aEK7NasHrczG030IDPrJoKLbuUTCLfkeYxOaP8a5tfLwK+WM8ddI9i5utw\n5ZpwcNIQIIjV+eMwkXyGbjszC+L1XJ7zIfdc0DCjV9M6Gy9jp3Mq5eyGRzu1\nve4kEiqb1FYVRZMpYnXBilgI5n6tKKmwk957gnYHXIib4uMMON3PSLbqy0fS\nh29fVF8S82ey6jsn30sXyPSul3BX+Is+zHijroQOAsYgWPYRqr0TCjEXv0j2\nHwdWvip/t+l3INMMD7t8K4nOVtWX8se85Ovk1nJSInwEJvnuTks4E5kBSZPV\nBLvpxdi226wHqYeqIXR5ZaUBtZymBrqGHi+vswhV2LB8Ltw7S6XAVSPdS7yL\nhSRiqacxbvHUC6xNFtugUt05iXXb7RtG1rr8cTiGEBn9qy7gRe/OTunkwjb3\n8B9hoxNXiSP+kF6Ym9ggyzQ+/gx71HB8P0MrOwk8JW5IYPsxNau5HnIll/Sn\nlUt+DRLRrUMZ0fpadP4C27uRnNtGdD8sResnKLCs132pZ+OassE2PRTKR3lQ\nsRBV1uIT0gDx9PDmu2RUYKuTp2ZoB2UnmII8cHb+tXdBQUm/lVxXiUovNTkn\nG/uq\r\n=VmU7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+8bXEtTSRlNOb4RJq3ChVxQzJAnbMyug5DFpRp1IRDAIhAMzyA8Z2jxeoBh/5p1LgJuRCENQPBoHeaoCJ6FwONCpw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.d1379acf.0_1588959660186_0.6810741544674395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/ripple":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5RfmuhLGUKF2SS9qPwc/QPktioykc/UBE3ZCsvIkONv3hImN9SfNqOQyoTdryS90nlfT5bR8rCBQinHyPAviDw==","shasum":"a05741756d96da876de2a2fb1a48cc4b3c70a2a3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.58d51fc0.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbA+CRA9TVsSAnZWagAApUwP/j39u2TD6MU9pRKPl1Kb\n24He068tlHEB0MOzoJaXChhPO2oze8GS0Xq8AGMQkoRwtXhFuicVcRYCPLEz\no5vzjqjYO4m+7R9r9zSC+eyc/ivf87mTI97gCLiZhn4/8BrAFSPnY/PbNVrO\nVlr8j/uLZfMGw0br4dSySTn4UqU3MZRXb1iK7AEu0KBeaoHdnntrGAqsv06y\nqgSG5VGk0l9sNegTyVTI4iY75pvSzomldYRXgNagYYFfYWF5cVqJ76ZKfUHn\njJa4E/OE2ffNxyYviJ9JMOA6hFzCGaQgGj2sGAxmvWbelqcg100lAExURsM2\ne2Ccaq5wQSGxh9qFlQA9V0n4ooMgkHt6Sz3t8RVcQq4WpvN7Lsganxid/bij\n/grcn8C+dgutA36cMDaHwGPn+BC/cZXHY+s3IOKPpzn0nl4d7A1uZcCm+sQi\ncJ2pH27BOuwZAS0SYo6Z/seviTMKnNEbr/2N8UEouNUI11M1ReHssj3DEWll\nNE2twdwh2JV9DF64LF1cZSHF52UheI4EABjMr/ar2FZIrEVMcZn1VZ+1VK9p\n16Bj5Tw/XBKFucHoyGHQJln5X2qdsrlJEM01csh+APzD9eQZhVTwEYl2FgWm\nYKOlV4pwRh+wbuGVOT1SDya4ObbJ1mCE7xN0xqo+CU60P5znLKf8OrWQY6f+\nv4wj\r\n=0vB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAzYOhM/6b3JLeJxozH9dB2182nNE+L1QGAfddY+fbfYAiEAor0TQ6PozwVNdJBp/cXlkvJ9a0C4xPjo5WXZ/1razu0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.58d51fc0.0_1588965438402_0.49151206971752703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/ripple":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yyg4P1D0aFtIyYhAwtwMbz9Mn3+Yp6MfEV6lfIR6xjeW8843KdvrAj0GxfiTim2Bxt+5k01iW1D0R2eD463kSg==","shasum":"9496dc7ef27c46b14857b89bf72fe2b260cbf25b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.588062d7.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3HCRA9TVsSAnZWagAAkLkP+wcz4gG/i2hV19Ng0jqB\ndTAUVTHTD1o7q5Tcu6Avtc4ihwiZjOAe/oFTFBERP0NV4Gq6KbMFt8QVfvaR\napQKmeZMc0Gr6O3hOAOB7VrlcvWuKUvSYBGJEJnc1H71p1W9ROWyNUm2lBzc\n5ybtvH1l7zCk78IX08FEp+APS89wT3VMa5QduOaG4ODwlndnpuVEdX6hVKQh\n3cg4Kb9pYUs36+XLkUoKwcwnK+hq4FauHvW+YCmQSQ+GUR7SrNEZizW2wybF\nbdJ6yKhsz6TXPLMe1VNBp1eeEUW00RqpW25D8I2NATG6eGd6M0iIoafJEk70\n2fKROPP7y/sg+KCRvv8YczMdVZUKo5OaNWwP9rTO2JRw94tzTx5niZ/Pbh1v\ndkP3RbOkZ7G6MbyeWM2V79yb8hurLMaJDQEwzJ5urPfNWrs/1af9FloNuQ1S\neVG+QbZGfL0YacTdWx7QJJ45aCbJXfEkpdaYQDPFTy9NIkzpOxg3U9nLRIej\nfxQVBO6Pyiz9CmB6hssUThl57Cn3Yg8CRRGg+rWp6bjqfMlS+pSHHta/zD5g\nOq23YtqllKug4/SVZ4HA/FRgsk1v8B1LtYSwH/Fv4ABeb9Mw+B79/wgIcVV/\nQJsqk8ca/DIk7QPzCXb3tUXsdAvc29TvVTz9DqmEsfr99QhPvOLwXRk8knnb\nVccM\r\n=U+Or\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWtIpdHaXw3+hR9of+pLV5jaFO99zDC/LoWwKU7/yxxAIgMhacfA7kTYhnMn8TDW9hjwjLbZR8t+ADNkyhxfmwtBI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.588062d7.0_1588972999486_0.9994001732372779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/ripple":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Mc3HijaIn1OI8RBg4g/I8NIugY3KjCcccGBB1ppuHozDwkWPYBOtqGCsffPLwvGWxk23XYJcqASy+Qp2BkYlqA==","shasum":"82ffa3f19c2e895bc7217786bf31ddee511b7634","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.fa21f639.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuJCRA9TVsSAnZWagAAt50P+wRxG/w5DpC7Y926z8dt\ne4Uqisy6f1eRrIxKVXKbzdvjDsIkbK8IZ6NeZ2jesFLJnh0AaioSkPxgMN01\nDNbUyonQE2TIRhVoN11ga7bNGUVG7/q8r6Yu/17BmhM473+m/ltpxT/MDo5n\nUy9jFBrPnMweqIL65fW4gkErUaS2pkqer0Dnu5A5fl60i3WiMATgkpjnSrcN\n9D4Sj8XIHKOqPAZ0sPcla8EgDasRMSroT34Vwkad58iIbKhVpc/w7/QZPanq\nOF1e/ffa9Be6AEuheC2WpOfuBt2h45yvRqpjsI9BbM81YyZ6r6UwYa6Fnjs7\nuKzI6E14whQ9a+Ek1H92XJadzhOerxIpFUwY8oG2vrwZXm7O+pfKxTx56Wio\n8+2lt/j7YAzGryuedR74qT+X/uN51Mg8k4AfzECL2RnbKt5SF27JBdroU6rw\nJCHF7SXFvkBKEGM141MWSjrGt4uZlDIsY0H1cSSPjEg3F1Shcu/h39+En4/W\nEBKZdXW6xHTlt0kMsaVeMbItedf29KsoHlsiuE4/gORRXEJkDV7oR4L3tLBr\nK/Jh/lN+6cCz0j2sDbq1XUbigUqpoPUYh/NkkMCdO05j2fRCp69mnYKbti1+\nUONgVZtjU8GSUwPEef9BrRku6Kj+6L/Hywu8g5OlQix64LJmKdxFmD1zQ8N9\najqy\r\n=fapV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4DAJPOQiUAGwdnLBEJp3+OQcc1AhbRrv0u7qLX7ns8QIgIhXFeDJog0S4doYr5z+Dldk8Z/6DLHUfCUHoXOqHXRY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.fa21f639.0_1589218185284_0.30290464793173677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/ripple":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6xu5ZO9xgkUw46OQn0eofIx6y5OQpZTP/KpI/3AU3VkmJe/+a/x7C+n0DPt7y5Fnfv8d5HskkZUVxhwsONhipQ==","shasum":"73e4fbff73a0ee42100309ea8153457ea6ee03e9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.2772c509.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsoCRA9TVsSAnZWagAAsB4P/2ykn/xN+aJeoepB01I/\n40wR3w9OlxGlC+nmC9iB7qgASl2r/eA3K6C4tFBMciwyPiPrZLKcIn0Ofrmd\nqYPC+JXovK6Tm/VOw9RQ/X7sEZWiT9uXZ/g6sLOQhwQhBEhg9p9jy8JLc3jS\nof+GCx009TCWA2KgcpEYgkz8e0yCN3oVg1pWoMvmP+xvqRURfjzzMsPNalJb\n5dQv0mHsX6e7H4AWT+UBH8/tQcEr2PxwsYz2r7ZmlV8NyNy92LEE97ierVzw\nfRFFDnD8G66oPy8mrIEIMGWmOfwctSix/0lo5GXCNKpr+hgt+27A9dZBdob0\nFcWBaFECnfdReUN3SK3Ykv9YjxSx4myF4ljDmZWuhCun2NTZE9QVLN8kW9Cg\noa6jQIEMvaHjavWkUhpwKs3uLYWua8dguMnQWGLV6R2ZPZEl4XfCsvYo4In0\na3IdXLP7ckBljKS9tB9xRfXX9/NH+4ws0h7wpj+Bw+p1qeKSm9GT3OY1G4rY\nfW+3A2390zDQIw6YvxPbKlRtjPfPDemL7xggIDPBjQNWsnkQXMWaZfV4zlMA\nET1K9wFof66zHvSKvDdqpqsk28QTGjxSC8+9Kt91+NUeG5ufxOGYdex51FB7\npL5W7uoUUs4EQMb+qHzQS5xIZhUXS5qfMWj82/E2y2ajSSd60HJvo9kV30k5\nRrZa\r\n=CMty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyXxJFr6G6ukT1UgfgkoNDhRWE+x8UQpIfzmAvPqyiswIhAKeg6qCETmajHJi4RL6IMe5tx7FhnTCZwPvjGvLZpQm6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.2772c509.0_1589222184265_0.5045956607587745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/ripple":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ntlzQ5jeQi5YJ8M2q1vtplfxsoQkGWPkZUXALtSCxlhEb2dLan/Xc2RnupzbDXUR1Y40hxtdYirjlUQEI51PcA==","shasum":"5060fdb3ef25f47e54a3da1101d06a070bbd6d0f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.fc4796d5.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/iCRA9TVsSAnZWagAArCIP/AsDmVc8lbUv2hbPlDle\nZFdskrvY69ie+LIvVN/ahJ21/0PhFbUHqDahxFeiOVGVFeSlM5fXmXN9C5sN\n4dsv7/o1At8vrNWhHy/PU65MgAqeE3B0YrODXp99WK+HKaXwKT64jwBksSOT\nBoEF2PYaAFOMQ1g8ZmM8aKBtrEOp1ffq8i2u8oOGySqrivy/8Zt7PP36uFy4\nVvuMXQubyee+pT7FxyHdxe/iNlZ6ej9RaE1RWXLT7MS+6tcrg9pmz/Ca92LJ\nUgvW47IOQr/zLnm9KwcyE5SaB2kCdEfg2GYPtZNjSEteyE0CtMK8zhgfen7G\nYNgDVXLaFn9RuOm7gzNm3rqUQk9Xek7I601a5Bqf18LjZ1hmjAYDfliY/CNC\noe5EOmRLAvahU+euLyrpZne8y1H1D1HQJd77vA2jfoSdwnHlSGmdbCBJ6GUa\negdcj81Pxnuo3hHaNWrhfqJ0S67aZzVdUOvR8DO5ScUgPfwtVZ05UylAFuyQ\nD7Queucg513QO8rQ8pDvr6V6KHuXqzaqp8VBD+lC58bHO/yju+fqEr1rhque\niUBuCvnFTE6APWvn2BtCefQMrsVbBjZV9WrzQn8oEA9AdLKNZ1Cx5cartZ4Y\nOtgt6KNdDlVceGfd/V4eMPgn1qTjDpye8Kv94/gswPpvd8P6gF7hPVACMNc3\nSky2\r\n=gUTQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbEs4cM0iDsexf/Po2GUc9rar9ZHzwM7xC1iTsW2riVAiEAoMDzrNNMLzcWBzmnsy0pFRplA2ukBXMxb6ssW6bh9/A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.fc4796d5.0_1589227490379_0.6977895989133063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/ripple":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mxaEhRdDf5JzmWAPQ5ZH/v1epetBNQzSgLolZyUssyiXRkWPEDEsJYi/mQDK4EZF9Q6/QgihdtguLyJXaasJ4g==","shasum":"d537f85ed9df65e1578d8b7391b39e64d8faf830","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFnCRA9TVsSAnZWagAAy/cP/3yIEHo3jbOVQTkBOiPH\n3KOUhSFaNWy8rKfcKuWssPrDBvB/tJYIHvHFbhdCOKy8FXBcg382MUKNSehL\nzHryfDEz7i3poZzPthUaI/HsJ94SrhI1i8NTN5up+yrPEQsn1d0NahI/mbtp\nytYQ+Mf9sQqiaUCM8G2ZZ8KZ6MLZQqtDtlzL1trKRL8fOlDQCGG1kBLvuFGW\naVk6J5N6mRlgzhETZw3iy258fUbbvYTZdqHmGctAAx9BQJUJY4s3cOJkwuAn\nN9NwH/zazxaTo3VLG2GbiwKZBg0nBPSCGVW5+7c+G+5s/vOpYA/m50GXRdQh\ngINkTgMobNpPcVGTRMfwqZ+Os7LwUduVjSDsA06EsfkqtZQ6H+bqyyE6A4eg\n7hwR3VyhfbPFvKKoW2F3+XM1SC0wxeYnceRnyExu40n54T390xJXMOA/Ds4h\nZiyjMAjrAVzekhpVGi3/EF266AVRd/MZGzXWHU7bI9T/+UW6kJsqHos4eMkt\nW9HbU+aFzNH8XZATwIMXEA5kvCwT5yDyAKNfQfJeNWsPoOTyjHZMar8aSH+s\no6gCxOSoDwuSVtvsBdY9eSVHkUi0W498/Xsr/GFXaDV5Bj1wj8dpqVBq91Ba\niBEMeXv+HKxNsTyKFZfkKJJmIcDaDwUPMVxww4bOq1mSYEL4HcQBTnlZPPjo\nroki\r\n=kF1E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBtDfuuuhGEE48nKc5NffYa5DCZ+1VkmncbaDwIL/bpwIhANsNV+B2VzDimMi1uULm6vlHS613O1vejWiMhZEV6l5i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.0d1c5f2c.0_1589231974966_0.3138635581421785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/ripple":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tW5azQ8FtwD5J6pLQxEIy5HGB5x/QSBTpIwQ05HKmjBnJaoaLTxaC0D4N9eDXexYIW0xGcPTVhwf3JtrO4DkCg==","shasum":"a72ac046b46d9724bce3e7db42bbee039eff1a8c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.d083d93a.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeues7CRA9TVsSAnZWagAA3WMP/iayCmVcRCao4ntQiNls\nkXWQn/W2k0/YQv5+5/tOvtiwXxK0acD4hCYMYbpI4u5kQs7NUZeDZQRr350J\nGsLGTmftwbHejat/7pXZiv2WjyIWwP6bL6JX0sP9qOUBLI9lf6Id/dMFx+Tp\n/fUN77bC48ewb5AuMEh1QEIPHVyCgDsFahEtqBxg1kvGRh2PvDla5S8wo8PN\nC69HSLZmfb09++wL46b64XiiAwp2oSgoX8+V+iPVFkv3kApGFkGDkoVgYieV\nnkBDuxE3Lbevy5TvafO/ffRL25qJjZSV7k5rcJWA3Z58cpFT3d2vkyZEy094\niImtHOCN6vaA6FybRae11kmWsq4jBHMd12SXeG/+lHovzKkpRpH7ixucqfgn\nmu7z+1ljiVEe/r2Tyc3lBmLOue5pbw3ARZ6wIFS0Cl5YhHotfiW/D2632ejg\nYiVOE9yiSDsj8ff25NDR60x08wo3ETjfYMfLfH3lb8/7VPYbWl1vPgmh0JBg\n+Xua7iVPbDoUTZgZ5tKfRfzvD9NsPkQ+oKEckrVgOUqUiG7I4XKSyPCNsvl3\nM9GEpMZZDfAq3/+zEHual9HQg5lTr8vLnwpKHGvtbsxmo/GthiQLC8aHbcbt\nQUrnDeHwVHysvwH30k9sr/WjSGIycv7X0rElJW7xBfA4Mik0VLSJGxzjDU7e\nW8rM\r\n=Qf4M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtX19MfW4f9yYmEToIBdtFFrpQKaOlhRqiWwaCWp1CqAiBA20KxYJQQQrOAGgPNXPC5EBHSvtS902vFslKG2sdRYQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.d083d93a.0_1589242682865_0.10740395166615757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/ripple":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+2LBghx1kt554hE2+ki9mZtSQ0/Mi9iJhFqnGMXuQti77JeSqDi/xqboKZ79HLcqjGXZ+N05g8v5vza9/TzXPQ==","shasum":"3d95d42bac992796c2f8873b68827ba3ab0ccf33","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.c95d429c.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxboCRA9TVsSAnZWagAAA/8QAIKOluJvDoyck50cv3QA\nmwm2XpMudGVU1nFcSDRxPmgsq588R6sqdUmxji2NsZU4n4U3RzNJ2KcSjFLk\n8C83gnCt5Wk6BZ04tPNiMREPgUHqzI3TaCUXGuqF7N0yJPLli+Y4VEB7hDf5\n1MDp9RB9k3rLH9A0PG1Ne+HA2rQ7Zr7bntQEaAdDM/Qd/vv1AB/Gt/Zqp/BI\n8fTN1na2J9c8QbnOcJpxt8JKYzkr+EkqgS1VwAQ/XS012Tkj/tQOZq0gp3yu\nSmaoWtpN6Y9AMyHxMI+Pkn0qHY5Mc/PMS6Xq6oKWBCRQFU9KGpUBQPKsTKcj\nmBTwwSSYBLT1KWoSvqXguF2V/AVXgoul0MaLVxIPDcDpUwRVQSUo1CcU+neR\n8u4tSyhMliTgBjUTbaMGbmUHMcZcLEay+icYOiFyWP4FuVvEBuj+YTevDPGJ\nMcjdsGtH0gFFoM+txY/20bSVtuf/vcBlv0mWIk5qaLbqUF6h3Jp6Gc0qjMf3\nHmPw/bWe6fNoQ04lzaS9bbA/GAYvT5WZjaqnmuyoETpus+pn/OK8ztsM6Ewu\nPsxKa/xVYuqEWJdyrIJ2BvHKmEFZYgrMvpN0magBG6jXhvF0ZJR+hLpnNhCp\nBN66kl3LCnEy5nExecpPkM9nk5eZG4oWHcIDiTT/xjsn4iwbqG4eDLoHQP9K\n+GYM\r\n=Mw+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg/m0sWhH45TtLhWAmAryJTBgrdEkH8Qs2IxmoHBPWRgIgDPXV1IZCONbLOdkvrFxWhCwcDYdPwL17HMrWl+UGY4k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.c95d429c.0_1589319397333_0.09667660464700734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/ripple":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6P1TeVSK0Lto/JZN7LjFiXwJTtuG8dixm0Z0fejiig7043zHr6rGGobzv9wLQU4SVkLwIotDI4xY/fxFFhNZmA==","shasum":"fbc3ce48be0abd68f5988acc5e32b4c289634352","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.0c1ad726.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0B2CRA9TVsSAnZWagAA4IwP/RMyBLXKJl22jc0qZmbK\n5dFj+k2d67Fd+wYAmaJiAGfbG2OcysJGp0Fff7ZIfXQzAU/JFY04XEFoJl1h\n10wNwy/vDRaiX2RdDiPDn61IcUylG8WaNROVLwZ2DUaRn0gH5OCR58bNLoXq\nC441Hd+mhYKruj1wLhSbb7wMUFjh3WsGFO4AmmEmEw+ttVgIeDq1jY6pybI3\nNFi25WpPpKAiy7l9C+6fOiYsvXTLmWcCFvzGZQ76ghGlQBIuxRol0uQVrmBi\nT7hGJCIGiGEbIij5VOWrTvMYTnfImGSWuqW3UoU9OcXf60LD86DK+KlZUYub\nMOrCOMGZAXiQVAFMkeQ8dnoWucL/I2SoCgacJXEpiSnkveEgCjL5NU+KiUV8\nZVhqw/U5x2zuaejU1kXVHlPb4pl9c9R6i8W85BqwZLAC+lvpVbVm2ei/HWC1\n2mCHmHRri4AjWMiX1On9jvNyN1OkNivFkSpVcE8TRSOcN9KhzdT4fmTlCfIu\nGHm7qLkEioVPGn0cTPaQ882CDnf1s9xDZ4nVrfXJP6iw5XbrGJnYHt2CBxV6\n2c7GTfawZL7agl9LrkM5cJk7cMTlF/PRsWPpXmqxgDBhbOTb+UwFLb419/fT\n8pOQl5oUAIhRqL5IfPf7gkmzFygecZCvR6FNJ+BVy7X+Q/KL1rrfMOBTc4Yw\nNEUM\r\n=N8EB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjg42Ss9+0vL8MVUzNUyu1CByuDQnJE+rXVXXaFibhXAIgCnGilsPfssGSYX7c2L3JpKSea2es86oiDVod8mxVVDY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.0c1ad726.0_1589330038159_0.3882397730841689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/ripple":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/y0+TP+KVrvEWMwE1ZEfjBEWXqetS+fMYcSYD/tv5wI4X5e8N5/0GQe3SuFC9GCWj2Y+3LSAtZB0a3fpHoURmA==","shasum":"26a17b96fe071405e2c933bdafd37cffd1692b32","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.8b6a4700.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwICRA9TVsSAnZWagAAQcIP/3o6awgMJ33IxUeqpJ5R\naPMHwsoNE9kj9WO6JAq473jN84qxo9PhocHqsP7L+7ETDLGZCSWsRjINXYGd\n4OGOIFVHBgd4LTBPVY6tQw97gI/e5B0y9xwb5i4b7ZvLuAHMmnjf/wGMiFP2\nvDnXjcaZC4xqX+r5k/7qriie063KKlroAACunCT+NYvHlCuR26qXGOZ9J7R5\n4TZiQI2PwFHGQh+Fz8Old7zZXP9f8wXCfXYMIDKibnIwrsXLbY9NlwfBck5h\nRsHBR3WoMy3lOEW5UXrN/egyMADJiufXE1qIciL4c/dPlp26C+GeyxNC60Yp\nWJTkNRCjFVLftekrOQlWvd8ehJgJLi8gP1uBqgszBzJ2sN4rDdX3+vCCLgoY\ntA2YZW+Bq1PAgYAA5CrLXNAmfWrgeMw49/Pg4fBsiY8jxJJ1SszPKh7WzrLz\njcQa2oXMzqMRE1IIw1q2nVfC78aWXIR7kOfDw8uv0OTdmffHRUlcPfFEBWrG\nc1QPvHvcp+Z8Zls6aBzKIxSm9ljU67dW8lTDxS+M1nUQHGKQgyTqcW+VBslN\nCoDUnK/g2Cmt02qcMKaq3UVmFN6MnZhjKcONwQm3w3U/3zMmrwInUu1+QJ0L\nYowTcMq6BHDdDJAGMS1pOYFi79Xx4Mhy5MCQpo8Gl5Bk0wdj/1EctthBSvHI\nuLJZ\r\n=f7qb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc76uE/+pQAktpDN/DqJeXrcfMuAUtM7gRCxkppAKmZQIgJDhf7LIf1L/KOA7L5fgPK4/FVzZxIGSwvpoHwVE+Tn8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.8b6a4700.0_1589390344239_0.9555268093590192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/ripple":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-293SzawVgWGrKRoURayWGDOOWi6cn2dhbWx19Fq1YSoBYV/SnL7r1sMg4vpdG2IbH9TS082UiymZzUwg6UlbVA==","shasum":"72156463f3be3c761afbf3a7c8cef4e8f3b1b6b2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.3270effb.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWGCRA9TVsSAnZWagAA9SoP/0dDBY2cu1M/5qHj+hEt\njDufaNOy7vyyXMQQv8IKnipTCR64dHS4wEBMAC8u1lRkFZOjoI0BxeNnC9dH\nYm54EZVJNKMhFPL7J8FcxaXKc1r25Kc/+0b6JZz0/G8l8lydMFeDuELhBPAj\nSMCl0maRP0nYFTUOjWE//qsQswHZbJoqssPaAb42lRVCh7psfkIeiooU8/ho\ncHgVP0XK4IYQTeeowFQLkA1jkOzrrh81byDnPSCUsGr8ei4ZI+kJzR04zc3I\nOcxTGbtC4nV8Ooluh3GywEJiS4YR4nVUzmZRFtH6YWcmDJ5z9YOo7DLtIFlD\nUVDz7vRdDfiIadPzcW8sRi6aXXpOklM5046Nbsh19JB9qNOlnbjiP8XiaSTt\nYjT+lsgDF1c6qSG4SMCWw9Vp/CBCHuMKxFEMZNQisL5Mo+4niInfktcmk7xJ\n6cI5XAORTvLJpkG7abEpmqW+d8lscsAuEnkuvM0u+FQ8BeCNGnTOhRqgVMWN\n0BPWAppmC1CEgG5aG/clbdd76rtxiFxc0K2tcoh+0VzP8Y9Rfp956l1JEVbR\n8XizDrfLf3J4KZJUx/00od9yGvfHD2MT+Fsm7cQnF6XVsWS26ZqzlNs7kiZM\nRfFUM6muOzY/xcA/rmDK+XNzVAcNXutBRNcROQJ5AJAsaWxYRSuB/nZoAc5E\nJZFf\r\n=ZbSQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXoOhBEdvqDZOFaGlGYZ1Ni/nXVA5CxLwbNTr3YC8I1AiANJs0CSMvi93Wnly0bFSuo2xuVdoT5njmy9u+wyzzP/A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.3270effb.0_1589405062364_0.5475499750535289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/ripple":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tnhGdL9ViYFBoxL51JqJXSjrRsVLDvgBYh/I086MEZaMr13KxGTNFmU2ZLnnbsiI5VOFFrpBp4hYn5DOsAuoCw==","shasum":"1197188138dd1e55fcc73a394ab125cad9d17925","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.832e64f7.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYtCRA9TVsSAnZWagAAXVwQAI0LN6FRgPsQEeToKjNf\n9vypdoGWO726b4F75w78hVJ+MLRQInTQuEyyYgLEgjghGtgSQJ0/TYgmVqsU\ngABGp2mkw+TbKyUSSU9a23ai0Vdq8LSPTTXflA4l/SVQkRxyYV9faxaQ5FPi\nEL6kBFiVOaupzWMlQ+WDDg2kKcrOHr+fNPEiXrp5kFOKkbBRAZHgUaY05q2m\nJdPA+lB0HeJ/Plmd/ys56ie0kKvjAqougkP5XMO79tajauOcIq64pIlGIgtA\ngAO8SBVPwgGseEB8tSBQJa9r0FoZJviIegA2LXncAjA8Qe03hf2TntLvHSoT\ncHy2mWIMIvXZVClY5Wrh7ofIpdTk8etSH+ZcsKpxXrtxrPcYs8Bjso+vdqPK\naDQvy4whJFZqvoKNotVCt3GEJE9iwUTMMjL+V4LLl+kgyz5koRTI/HA87uD/\n8ca6TAHGXv7Ir5Oyry5UsJwjGVldX9DdlQlAWoja6biRAfqrPjupgYqYRcej\neHj9sOTap5pqMO+SdnuDIADfOYzKLBiKezP49DXLUD91kKMKecU//h2XD7IS\nlnOJ50AyXnAz22m8M/ZGnzl6QIU+kug/P4p4CkCRsn6F3wdYbyRmoL747MUZ\ngJrvwaZrHczWPorAOCydbS/8Wwe7qMPUO8G2hSrzicMr2JIBCT6jjbd21cuP\nLLRX\r\n=NsBj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe2eLweaO69pJoj7oVJd+QkvYDb8IjDVzcvUgqF5dwGAIhALBj8IwPU00BKJQDrzXXr0Z0pOyP7UQi0DreNyCbFrLt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.832e64f7.0_1589417516598_0.027623966283916834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/ripple":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cdds8VKfV/kmim859V546s0cJBD63eMLJW1gZEwXknNxkfZ6c+LnLyMBBcnMbFVatOMEmo0OnSUMiHWsLFi0eA==","shasum":"2907e7b0778c1a2dbbf48529ffca0054264dbe4f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.472fc4fc.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyoCRA9TVsSAnZWagAABVgQAIHy70ad1ufIh4HifXmp\nmp7WSmj0l2sVIQ28eSfBJj5GCl+bfQ5gv4Zxn9KGfmCY5GzH39CgZaJJfc8m\nrpaDr2f5HMINtw52K6kfMjbu3Z15Di9CbdgCPwsCfzwYQfOq/GRd1BGrwvV3\n2P8YUDF1N4n0RX4LoYZCbCbBWY/AU2TO95xECOkTh/ZqEv+ZTy2jAyJ4aL35\nlbsSPtk+m4Z+OyLxtBnuXIpy/2CJhlCZnayn7hRZ2xUDHBKNUDHywjShJTPb\n9mJT2EeKZx5t7fm/vwBuBmnqhbD7xVafCv84Kv1hYTkGGF+aezrANn3YH66C\nOlj+QSdsqPSnE86gWljlgOVWtYJBS3Tu/EI+KEquSmbaiVmLGcP8pMP8tP+o\nw78z7Z3BIsIdtCpM7cgDgLiUNRfgJYoZOaByNk9aGIP5LQZ7lQ01aJPIdO/V\nnERAyesCUmxRZydXIF2POryoaFFId9xErmRerPOYKHSnqIQOsvSgphCApp37\ni2gMV2H5O+HvvRQzMZU/TGt+ZWwWWuV1iyEsIv/+oABOJ4UJG0YjPfy5dBF4\nSMoUUOuX5IKDKJ930h2HQ2PwI+syGAEQNwxlpESHpDcZ+iZBkodE8KxyMTJN\np3EiSJzWF4kvikS0vQNPlS4N8aj/EThUokbRhM8dZOmlc0r3s6K5tgDZebtm\n+YCR\r\n=wd4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFKE4D+5QcvHWgWmerB3c8Ix8xD0850Y2ky8zrRqpeZQIhAPrWi0rooKdAb4IZGRG+6bTaHo1H1DRPEEDxdagzQ3SZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.472fc4fc.0_1589427368288_0.1700119075753468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/ripple":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-twjcpHwuFHqYF9mH56uH9dtEoALt9is87y4Pko7N1jvTEdqeyZd3Xan03VLE+7jfg2Bg+JmENmAZstLVSoTRCw==","shasum":"232ef3538c82d14dd31496483692c31b103fd49f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXC5CRA9TVsSAnZWagAADyUP/1EFkOFlCkXIinwWPfWs\n9hDaw17AfZaB2kKMgwlKZJSbfTXziMVDTzXQgV/WzW4Qm+eCVOohx+NuVxue\nsMHuVAMnN/foPbzYIuQqilKMIRgUkZSjWiLUwFMxajpr7+cXnFVdJa0JNjou\naJ6aBJ0BdvswcQeBQioLj1cdfdDotoGoNJvyoGWrOSLztt9q6gqkaUtO5bvr\nO2wHezMGkNTxf5+P3JkjZnvtB4W0WadHNWryrH7cClnQhDvbnSDsU5squEyr\nkK2DFS2aHfVUJ6pHwu1Z/dWYVacC9q6SPWRznhM14MpYMcpuUySRSKNwqUVx\n4EseJaYhGOKTP1bPkZi/59awScygATXb+6k09rxDgxs55rxDYiAMBoh+Ey+R\neisGZ1jeqo1Fnp8+XGZxRYBEd8ry0vhwu6LfqrwBjPuNqkT1LTWKVwomSv9T\nGXGEBMDft1pQGEDaeSPXAUgoHsQ7kIPKKz7lI4jrLqwrDDf/wblSFt/e28B2\njLjLf9OvJMcPpvJ8O8oIomj0T0oJaKwwmAoDVDP8UfHXeM/SQAYnURU6TEDW\n5NU+06jLNVNZ07VuRjNTmCQaHMvCTgLR2WLar3ta9qJL/WzwJ1CI+lWC/8VW\nh3Q8DYnvyl34TMH4TXO7mfVGXY8uuIEwRMzCYjU0YVtGfOcO5jFk8RPbsss2\nbod2\r\n=5reU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+AkajH1PErrQKKSxuKwX7qh28V4TtXLnvYTGPzjtuEgIhAMA5gS17GkezHnRsAgJqd/0V9auuIpV+q1yMvJaJqkOm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.4dcd7dd5.0_1589473464880_0.37146950212436236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/ripple":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VA6Rb/qEBajPpOrb4ivnf5aqkePHLH2yRKKaim7PCraGAfJzWocFrr79BOBOSd+M1+obebxvN7ddfku0td8Q2Q==","shasum":"e15d739a60604880256263c6c2a2f0bfd7fe1854","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.bcd3400d.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxx/CRA9TVsSAnZWagAA41wP/juhL357pXB9q9qmMXuE\nw8ty/F1LG8dHPqaoFaDN/NvvXeK63RZK9meS8IOd1tFnPVgWxvQke/bLHUK2\nizuU42bOyh6DVEFgA6OsVP7mjB3QJJVWa7nAh4z2PTU9ec2SGFtTG+oYJYGl\nOqsrptaPglA+dHFrZq0vBZO40mRUXLgrQcxQ6q/7wOvf58FhpSAqRCklw+QJ\ne3rDavj51woZccrGjFIzYIvQygboQryj2KKEvD07Eg2mGM7yVwikXFpT/tk8\nMNNUCoYRsUOgoK68cB3R3unxUMHzpqrOYi7O6FERR/+mPtH98T4dsmjYLpd/\nWbbzRUTqRRIjofZJgR20Nn9WFLK/RnwEjPlaeainUzGlYc7um6FtAd+uAXZ3\n31lAgAwp0CQaSsKDeodxJR/VCFh3YmduI7P7ipZil5yngs3U0gSEEmJUW3lM\n4HHfNwJ5NrliS8yxdOrEDzbeDnwlwiqRDIHHSO3M3yfG0izRCWsdTu6EQkb3\nEP+qllvUhmX3AeKgv/8j9l4Ja56FzCD5PGeQ/4r0J6OEHjFE3viY3qTWQsGn\nQO+EQBMo13q5Py/2Tpz9BxoCEwd/ZzfsIQgm4SL3aed+IyNIsexIr6k05VRX\nFI/q9ScEC1ZBXcwKQOB9ubgFO6AAk8fG0S4DEJli5KQYLApt7f6wVVnpDBbh\nyQuO\r\n=Y5TG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyAhTyv60G8e2g4+8wL48z9ni/fDQII44Vktst1lYPFQIhALq4P47uTjqSByOAVn0gIpHZqMIfJbSvyEiB+3V2f3R5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.bcd3400d.0_1589582974407_0.766174347519226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/ripple":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TW6rMG3KHk8NfFC1RN0kyYWNVxPTRIr+yvoG7yKlrqLWlW+LM1pDf17vNuvFvYcxvIeRHpjzxpY3eIItSAp7Ig==","shasum":"b2e8f015560bd1aa43cb8efa0d313526a5abef9a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.91f63179.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUKCRA9TVsSAnZWagAAjsYP/2q+xxHPmSfUsXCTS3sH\nkx69AfUX992zOcplye179R7GiEcot64VRptzgf4v4snLShdlLIUEjITTJmjO\nd820/lPA0tpT59arI6TXLrTmU0/SEwodm03z3pUmsAFe8mTiD4KkzsSFWcpY\nkT7kmb4TPAfJkLhxIKs1GW7xQkIZfFWgtNz3zJGVj0Ppdi/KbZJUHUEMfE2G\njXiUjsK8LcqYm+jIfo9vK0hmtDz9LAQgymWmpc3qgtwpaUi4IpAQu9hvNFNu\nyeNWUjqhoyMtvCxbXnpk0H/MVObqEmF57Jt71Os5wv34ywL++RzfAfhdOtE/\n+ZJNmQ+AGc43CMI1SJ/5qCu5jvOQLHE0raH3OuNnfOGORiZB0sGiTtIFr/96\nvUj9ssNmhP+/N6rEmHupJIlBHfx0NMOxCcX776zJfG0d5V7yOCHRf6WAWaMR\nW4FxvCdVAMm0R6dJIkyS2Q5keZ5r/Jq9E+YjM/QFEtn4fq1KzmzcBDASfahy\nJ7FHE1u4TByTS93M+64KC0tyhqS0R8nb7HTqxAGFwJxp/Q7ZCuOfw58hcXSr\neJgQ6Plg1UDk+5eTTnJIkqhCzRh+yjE3vTTaqF7texZGdPtvOKtPP87ts/J/\n+9KPEvc/3DEeY/jiXtlZQ+zOb8bfpr9ip7W+dsvbTQe2Hu0rTSp3+enpBG2M\nkqB3\r\n=nrmv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHUXY60bKT5Eq9CfzM1qXUF95AkAx5BhigfVRr6gb0SAiEA6VTIhscNuF5C8Iq0jz0QF6ge9w87rDZY4JvqUIgG+Rk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.91f63179.0_1589589257971_0.018951043068810902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/ripple":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YVkuAdjp4FDpc/WOm1Zgx0fcTon75CUJOYDzLpbfxjrMrDSNUxWZxWC5NPG95yEvV1sAmyMQExgQ6o0BGojPew==","shasum":"8bc6ce7ea8e45c4246659e74002734b3cafdc6c5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.b8aafb56.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtR4CRA9TVsSAnZWagAAPh0P/Ahkp9LVOq3BsgMg7RI5\n47qolBr8FnWRJQtIg+AYnQCdgbrjnvK/6mKY7+Hg0P4KLmzbOXmFV2txyrQ5\nO5+WyJ4GMZSF5xCzRTlHeaIjH5AmPTHWNEWA761F6/ynattac/H4OL6teqf+\nJ9NMY5c9lwbP4EgNhGASGbkcKWywDUMwwzo5CKAPCcCFfL6JS5nqEWsmeluz\ngagz0r3OKcjh3nBEoRClnrFEvdP6d5HuI+HDgAxwr1bpWI5/uq/nzJAY1/DS\najJxn7bXmD4uOTgnbhpXMsOkudyRC4bKSi+dJNpW4SWas4ZP8SfAMLLGRDzn\nDBPTWa4N1ok0sWOspllz0YL+YQt9v1xkMnITHKbEY1XfGW0kKYc59L/PZwt7\nWMLK5EpKpHVQD/cifiEd9yjq8zIx0G9iG+9wxubMdUEGo1uEaAkaQKSD83eN\nVvk/w9ZcTLAzbJPTsDhHE8H9hqEXSwC7UjozNXe/kwKfP4mC4t9p3L11lJxY\nEGK/0KbpYTS9w/tba81u7eKJs7L8BRXFPTgTne0vIhiD9TTHdT3ZbRdg5zwm\nG5H2uHzEPozsogENxzlYe/rDnIx4g4KVvrDz32yHqfJZKOsVqrZ4/ykUZCNz\npJWXfo2gGmFnwSXXvlba589dp+qbMVFiiuWLdr7lSrbzc0be6uDVyXLKBGLH\nCEr1\r\n=zwD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCFRKa2toGX8lBqgvfxrqJYpUoj23P/+nDI4ezo2zWPAiEAub4sA1u+qSKCiEiUDUnwQkcdW16lc3nbZTW2/0YUSgY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.b8aafb56.0_1589826679662_0.7587752938266878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/ripple":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GH6ktMcs78ZdaemJ1fg9CcErv9W3ciyJZaE1hjMyfib5PaQ/pwavEl/wkYv0o8rii/ADMK/kVGV4bP/9LI+mfQ==","shasum":"448fd7acf4160acede45d262299c8fd858d9cb21","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.a564b194.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQ2CRA9TVsSAnZWagAAg7EP/3bospfx8QMBuHbFrZDs\naTHk92zhU3pmSQCmpEpkxv4DBIgQGs9y85Y5jlkfGOtJr0I7K4OjBuGmm3iI\njhwA0a9yfg6WPpkLuRT48/C2BqEEWcKbEYwA3hHxwru0rHogTRaq1kNd1FAn\n8kTQZZiAnzmPGYYvd+MSvO21QwolA9x9YFCjOFQfevsmFUsKTS84nzVlGnDt\naZcZe5PDzMjgY17PF0O6tpW4llLh2KjIOUSt4HhkGfxQJYX+z+ZlovycVi4p\niEgtVPGq6b1iLGcLdvST9kGcZ8KHZQ5IpJ5rsQtCcWNn55lqPImZGox2svE8\naUI3fUZ0a336/gsPQ/Om6bD1XSNXgGs8P1kjkZdfzL6PKNDUC6wUhyLIqiYT\nQzKaTqC6eBpmAaTBhlno4tM1MT15Az8wDE+6vN73yehbW/k/AusADOi/8Vt3\nj9WYZ65Hiw61t14n1XPBjKE5OfZmmaw8K0vuTS4e7bmMXsllbKP7Y8z8Ly1Q\nvgotWvlyvke2/lIs+gOxrvcprgrK3Mqfc5ojePnM2ljWy62Rep4ncMj2FMEw\nuUHOwyS/2cVPFN3aKGQ+c8o9K/9m5y7IYlgFdl2oQohkc4XXTh6xkFTvP10F\nxGpm8OVmi5sdnV2WOEzjvEwpXLswOmm+l7kTzob3SCTYScfhaJ/LYjG9kZL5\nISni\r\n=HqBR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeZ3V8wsVDjJh2PGpznV0XAIk6b6LGxjVON0y4EpmCvAiEA9mrD+Sws1W3ptUTLIqamrPMtOpI8ySc0CyrRZsGApfI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.a564b194.0_1589842998201_0.4189884109377595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/ripple":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gOEaLsPfimfodXvGtzPb9YWBkwQHNznouqTQc8Z0IJEQ5cwiyL9P1YtGIoIms/PVvWhUVXySZeKX26E7/O3F+w==","shasum":"aa3725924b71422df3512283b716b988bf79e314","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.ef56465b.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bYCRA9TVsSAnZWagAAY98P/2HB553liSIAHnw/cnAu\nW0aJMByr1w9Gb0RSSsWhoZtw/XK+NNnvVyx6YfdANQ1RYxmREsPyGr1zoQHe\nYnnGiL5KfHisZHe+qt+EpesS+MN4zbUPsnZ23GBud8lPBSfivHlkeqmidmNW\nlaQunYi5+rXYLsijvXnKjJnwdQaZTqj+ll2tRvRjh3zmDdQJ+LQtRrDCjL4g\na9OzlvZdr+2mGH51j494XG6zalN5ss0NB2tO12haF1hkOGdxpaTvNM7Hnwda\ncJovNSUoBkyZB/9ZA5aJVLdM8FHnSltrNqfN/FohJGguAmj/FybwSmdczjB0\n/wq78x67ZmDzQ6PhMfmUbSTZukSEmB9nKWKRPIl0QJNdSZMNlwVbBbaJnz13\n9HfaqmI7/0EXa1bcRhTpiVpbM2pAMCORi05RUGWwdK+CX74VoS/muHUUKTZy\nHkcYwU+7TOWQ/B4K4Aell0InNGvvd9RvJEjjdZ7RdmGcM9uh499Lu6WSIIqz\nbHhkdpz/LWNteE0p5lxyvIVI45kMJZRfWml4AsvnrK8IUpHyPptBq84CG6rv\nEHzykCVRYS5jzvKAHXlWpeYtwXBY85PvaLVK5KNL/KoRNZETqzMWtQm83r4w\nr9ohTJNew7MNmTOecXNyGhTl6zXpOAbITOInm0TVNZO0887FhRwlScg3UKMd\n2MSW\r\n=emVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3d6hAJaHJPpCqkyfq2CLPwu/iVBYufsQrO4eDMRKxJQIgNl6sHie7l2RuR0HPMdZTZsE294BYw4dxZLkIfaDKDls="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.ef56465b.0_1589860056166_0.047694554391759736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/ripple":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-On5X+Ly0WYBCF2yqjStfDvvR8tHTtOqtpSZgl6opbsKLQA3RGGtLi0iGxgG0KLZb4CsuBBhWtkqItRtgoeNVKg==","shasum":"93cf5df3337d84e0036ab685923146a12a03d25a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.c22dcd71.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBYzCRA9TVsSAnZWagAAwq4P/AhmTpWNvqHbw8qs9nzM\nmpn8zMvVHKxTr3G0A7cePzCqR9wbCfgy5ipzkJ9C/Z8Fk52J+B91U90JvvK1\nbbDFaDtGDRtfgSvLga+hVg0/L60dNrf/j6A+PeNsdxjNyVOYYxmZQyQDk/Zz\ngzgP8CGmuoI/h/B4FOgSgghfeu2Wb2Il9lvRA3QleJaA20i09dU3qBi9eYVS\nX9mucj3IVBQ8zhIrJgYarMAmbKP/eq99NXBnYrY+bbB36nkzd71xUrW1s075\ny9T5Axq2opP7DZj8nDXZEvXNoABT7CA4FqCRb7j7jNgve98+snBMAX6Aw2/g\n2e1ChwPnk1sppH50WAmAH7Mt7x4o7vyLrYfpTQv2Qj6qiBDcrovW4dAfteAX\nWH9PjQ5xUZGPVJ1dj8GkZknp6zIW4AvrXCt3eZX6GBZBhAozFKwRucaNBROH\n3iOmWqTJqs3du68Oo5xAvqbumAALMksuz64w4CQFHQQS42Amxq6Dv0EqY3wQ\nfEvZKERlDCLOpKlJg3N5imTlVlNk3JYZnQ1Ws3dyRiXwCUDXVEDkP+mnzOrc\nTBpCp75ReEeS8dsCZaK7Miyi485wIAWnQd7zUYwzSBaPb374yyIWVWyR1aFz\nja21JsLKfLS8GAgM/uOUJNvfhC0wiiSOsqzjucjwyPUBgiJbq86bcxe+BQcS\nySXM\r\n=UNav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+DrOhJefdv7dCG/4eRxXAPS7fLvdVTPqsMan4vv4z/AIgQer4RRiSNNHL/iczGdwX6KFP/QzKSJ+FS3StOddrDlc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.c22dcd71.0_1589909043351_0.5801399109885108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/ripple":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-whvlYq8d0Sp3/fDL/TUsQeNOlD2gWfB8mhsKMJ1PeTlU2027D5SZ2EXyxCXUTQ2XB+Xo9oNQ2D/zOb10EKtqZQ==","shasum":"2965c30569592e848466fb20e12a69f010a26efb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.6eb62388.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOxCRA9TVsSAnZWagAAYjsP/3GNewk9xsY6BhfxWFFI\n/d8vYmShARipg37f2lfGklAs4Ua4GINVeeaviRThbLUOKSpKrmEzIoJtCRnF\nJXONS31T+uyW4zVerw2zlvFzDf/i8sEQxH0easoofKhOkNWirXDZJPHFj/yX\nv/2ddzdIiKFWAiu8mxl5WGi0lztAfdx+6AXf3mFa619rzlpN1bsY0NWZNrqc\nuIAWunpdShZ3LD72ipjgWbBgkgglpHiVs5wjceZR2tcj3LzXGkmfYkiybKDy\nGm9JypVoyq7bX5jj0CTwUK3rFsL4ssH9MAH9EjshvYszLcHTn7pcA2Bya1mB\nC6dwr5JOSMUzhLjk/DaG5hpu7XS4nj6nQ9pbpTjxb0M8+yMDPVuI7WLv95Dd\n8pXyhhgDG2cjL0Pwvx8YxxVuGz7rn45FYx3kgf7kNAEJCoHQpw/Al+J85VyW\nFQkLFpXJD6pcAs+Oxcd+l6kHjS9ZB1m48fCBVqRodjNF81iTjsVbghaSefYq\nUKaYMlwbS/ZYZmVBrR5zGZapIPzWh7u5Gj/NH5AWmSd/Ivn0yMnFc//JLoaz\nHnmy7w6ct9WsQp3AItvsouZcr6G8ejBN5Cfmx4PUsbUMJZrSXcRUIlNqNPae\nDVtzAJeU9WvcqebnxwBuKJYrsejdrVH2V7O6mpq9RDvp6sZT3Pw3ttuxtyh5\nj64b\r\n=m2Ld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqEyDo8LLbxryTbv4PTFJTmkRZcdMJaBhkW8eaQUkSvAiA7VbCcBo6/qehKAIjV5D44HMUCCQK+h5N+fLjeRCxeKQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.6eb62388.0_1589920688708_0.04286558353065395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/ripple":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-toYz5tI3S7JQsWzeEUaQeObdlp43uHC9WJ7XXHmocghZ4pPAIWpjEBhcmyouF9xb1So5jmPnce+cZOxmVcuUDw==","shasum":"9035bc448d3cb64e97ff073702991cb2af3f48d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.9bc3230c.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFG7CRA9TVsSAnZWagAAwScQAKEpzP6l8xQwZ6PJLhYU\ng6n8L6nrC3TP5SliHE6iud8Q7KY+62jCBDvzs5xQCtt0NH0xLkQivK3Ec2mt\nA3R3hC67HnHpSL6d+oCQazkswfMHJbMp5LqKGDJosuJK30L4ug4EruU6t4cR\ns9g+a9af8r46ESU6TPuhV4V+o1GV7to0L+68P7DhasaR6GclbVvC4pVhzgzi\nZ60j71SaWC1jpxCEtQrWHEilhSw+KTvFjyO0jmj+v20azx9eUhHSg/TIIoKz\n6nw+BqNSXGPPECgOn50/mjFAQGlBX0jIeFlUPp6VnSaSfG7aDubN6RLuz4jX\n41WYhdCWmT2vSu+YnZuKsDat6AHTetkkLokT0wo7dPtD3HmSrpgunfqwFNYC\n71TCXRmQv7j6dykgGl6blDDSOzh+Ka4BrzteQaGCaYc/2nbfehtr+Tl6NAwC\n66d/9rlWoxAkW0jK66u2jYtOwqBFA2p/HXlQTah+k/QhAi6O8CSG+wbclTf8\ntyhVq+E5wLQzr+CYyRQdNG0fjgzURMQwu8D2pREVieHQkzNnQMGbkIgOro+k\nYb14mfw0z/iKEtSXWwspHtUHmuLSNzR+QL9w1WAv45q5igjVNgp35vhLN3M7\nJLO58JOMIcQjz9W77ZyVZDkbNG0DqR+eNJqiVfC/FHy5iaSsMp0PPq381FGW\nuScD\r\n=OWhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqZF2O6hU/LMI2Gb+eayFkExafYYINplvsJagTSIvRAAiEA9/RDMzdFhUlxDeYsDOPwucdqSeNfBntflxVGL/IJmfg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.9bc3230c.0_1589924282883_0.9420399784796278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/ripple":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-r+GnxHTNz9Ku6iV3hfy8Iu9v0/MiHq93m4/wp7lsKEgu4TE9i2ddFm4ihNVxZH4BFFB/CnAPyNNw2gWN5KKZWg==","shasum":"7303076542b5fc88d8bd7c42673a73f94aa7dd3b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.421a6856.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7uCRA9TVsSAnZWagAAKHAP/3RTTNzkYKK/HvJWq10S\nH8cxywntKiFRJ0p0lSY+ZZm89wZnkut2l6BNUIZ+9fThSt68pHiSckpQmZnK\nyJLlW4rUx6ieoW45R/9OygwKH5oLUzBGk04nUfWmA36HXw1kQ7eExRFItL2B\nUEIdIhXYDvV9FWS0+sHFjj1hngFUn3f6mmEYHepe6Mffsm9WdAFs/NjWuB0A\nERUIr2sBVAG91dHVnEv7Ohu8D3QEqov6aJTBocYavfk4KI3fVEaj2nQleq25\n7MhONSmhsKkBRoJIZiAjX5z+qMa7HJliCXy7drHJqVK/zP5BVCjK6s+Ix8jA\noQmOipSNzfZNNlY8BIW4SeOnQySPnZLiGfgF7fZytCMz+U1t3iAT1n6E/G8f\nvWTIsC3/oAe2HdDM9Acj8Wq2deYf9AC1eaZIe8s4cKwYMCNT2cmgM/rpHYuZ\ng5W2Z1iIifSRUXqf5SnX/H61vTVrpWdUpJC7g4tiTMJTffbtrAK4EbCvdp2H\n9RHQniS3OWK7g+9uFogWts3FzUNKquMyLpAHPGRTTAy4iLVSqpYjsYqR5OgF\nWCIQ0TQKbgSklDiAxcjtiBnfqKOP9OJ5hG/G4Hzkp/8afvi/ByiSmA0HkiIi\nVw3atClh1+2sK61yh0xYCK+WBBFEpP1o7LyzGWyLoqB7jC01T7xn/uNDIqpJ\n8Lz2\r\n=+7zi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7P1ZXOc17RzUtKAlXAqOOB5PV2BQ9CuAGCufEjdOmRQIhAMWvIcz3hUK+CkjWjgEmr0qSHMWTAm9vlqF+9AHBAsz6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.421a6856.0_1589952238490_0.6949871286247349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/ripple":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hQ+1Z1cRUTcxLqwXLkTMYjRVQYMEuShu8BUCfJgYxF6HBCC8dXOl99YxElMqvA6xb2BWw0uiAx2ynxdGStRc9w==","shasum":"299184a309089a83780738ede59336c51640e0df","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.761aa6f2.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaF5CRA9TVsSAnZWagAATQ8P/R5Zd5BipCvxtJc/hQtj\nElgI6eN656pddcKlmS+ZUxEIajFPH5x44u/qVXbbf4AG9yG99FqywDD3OS6q\ntIQa9bUEFU33PFbEdj3DLOuFfqM+oMpEAzm9T7XDIjaqysc1P2rxeGyHYUDh\n3ciasNFvdFEdYdO933k8V834FM1D/lV/AshaLarNZRTgkiBidfMeXdB794KU\nFRwGlZN8gaYSXja5HFaEgVLub+zHf+iuOdysVe+g9NaYwuaVG3PJ6TGs8rfZ\nnsDnhawENIHhe8F36AgpPb7HxYZFrO2hIZalwQ22slDXyyBpzfAByp6vF317\nvigFWWPxUQdJkJLVFjGZ78XA+n5jD3sk99PVvjRtKXiWfB9VLOceakr49gR4\nEMCTIqEncbW6NG0leIJzCmv42bYe4Pnzps8Ww3NB119H/qv3nFxSVf8evXy5\noRn8ipvKzXlVAM+Xu004+ybAqIylitCVz5LDET68WCorCNRU3zebTvPA2wII\nvtwkNj/GH7LQkGvvzi4WKHazhKVa+g7+lqQo4vPeJdPV8SpRqHxg/BVcjjEG\nVclkNERgxhQJvZREmLBhssTTtMnKbv2CoD/FZD6QMookv2RzPy4M36wrkD6T\nWvJh0AKyu0gWOeJjH/LYhPG6G2FccxETMP39+TxwPM8z5Rnjc4yC+hLRqxUl\nlFtV\r\n=rHUs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnuUhvKOfUpbb70G0DB78RiBam8iTd1cMdmewbPHhpNAiBvSB1L6cbh1BxZdM4BrIECTj/DxSNwxx8+pNnnJUeq0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.761aa6f2.0_1590010232168_0.6921032503921427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/ripple":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SYPsm5v9ZtVAbDQAmsKluFlSTH2TYQKBK5YUf/aCIS/gVhCrfZvKBgXkZ+BeSfv6TVRdrU/OnKrUQbZBvuRK9g==","shasum":"e28e617057337c410f1a1781d0b98d535f647cf0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.f8654c40.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaO4CRA9TVsSAnZWagAAf5UP/37OZpjo5aE2F3d2JtIg\nfsR3stsPGgZxmAfTgNpcnGWA3Db+ZvaaoHGjMKih85N51ut+xJJdnzvYIZFx\nzsTz19OI7LMT02Pra7SYyDOx1Pacg8auA3oj/VqhSVI46ckcUNUb2/I9LGLR\nKfptMcE4Dkj4PHb+lRddMogg0N4Ij0cVHokq+kp6NSfSSF1qbXpi1jr6NUH5\nZIYMhbXPVtKkMj7OsAFakQr6/mYzfEeBERGZTH5oMXRU02wpPNUKfZsZbGQ4\nnExZNvIZnrgo7aEevyAdRLA+5rLahJ4RHUvqMrQXLRhTQIG/0WhQ2+BwWYjZ\nHXPXSljMciH/4PLOXtFyYTCe+TZrr/WqCkrHvjQlgBSY/BJs3kzxSs3EGL4c\nOD/s+oe3E1mC1RX7hGc34+xfaphErM82JNK8vLu4luATUyF6tIYeffCdKl+o\nCwINBrv52CCZHTtzoG3e6eNGyLq2atchbdX9+g/YTPEAzEfB78nSTx+mo5gZ\nadDDZTYgT+WROkaA3qEsuULqVWhXsYHKCWbESqssv3qCdAvayIKK9Q79tj5F\ntopdAcN8n6q0BIVPPjDKF5oyR/8khpcrF3xi8fc/hA7XZUlegxex52wnGLMH\nVkE1a1om097rFbDeV8UgJufu/DDXSFM+TTJitJ8Ms9wjW7gWxQbGKBJEpgoh\n1W++\r\n=LCBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAlPDU2OfEYWmp57h/LvoAf2F1sJS2aO7vQRUsS2osR6AiEAxd8fJZlZ0D2N4yYLHP7EdwR/SXe5SBIyeaVPtBSpVVw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.f8654c40.0_1590010808253_0.5451393059914389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/ripple":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BHlYrYmkvp2q6r1rdzA8znP27uh5USjiFiZAGdt/7rHcsLFUy975ny3qhwP/LjUaIHq8UBoO+osBPFcCuYXUfA==","shasum":"cd6fd3bb3bd5f031281bb8ccf9eaec85312d81fe","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.05f3853e.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtQCRA9TVsSAnZWagAAORAP/iRE+18arYfzcDT8/Amv\nhT9AARnvIgEC2ImqcQVoxIyHmTmBXroYWiZb1y3kmAycoimmmCapyXxlZIM3\n7I0S2X/omlb1/xSFf+M29VyNPNSNTLyiIb7QEqlUjSSVabp8uEwvc6EBGJuL\n4pYxaNW9u1mdltIVKQEeVwZPdihAAj5zYBsNHOiOt6Pku1X1F/Vg1sg0NZfS\nBCRV0IP8UZG8hsu2UP0EeKQttdYc8Z00Hv48ZcoGFPDBWKXH05hdqqWneq6A\njc6wSQmaD7tgFU0XCuUEakTO0f0KsW5Fv6ka+FwkyIMZhDgHrz3lG6UY6gGv\nWyAfrwOdzov+MzeMMVBNtXX5A103LScuUiirPXBfhoq4fjK4+8fWha7yv5Ib\nMyBKOwDxkD3SqsJo8ZVDg1+ohYN4NlyM8ffeTK8NXTClnMasM2p4bynwrhM+\nlhOTu+TC3Ap4+IvZ/7HDOR8GL96H28JVh8Yw4d1Sa3T98pIR5ty6XSVc02X/\n5KPrwqSyB0iw3pNKN3jfzVJ/XeoOFWSpm/EmvtxEuIjiGF/i4VvRbTjjXmVs\n0Opq7ALP9MWJb+2XQenu3TRro6iuv+mqTx99xRCbYSCdN01YLFy32lw2YnBV\njXUrRw2wFkT075uSFvuGuaA9rkrWcaxkI5m5ZafkuaF0L5OCRfDH8lUmZnC7\nCoco\r\n=NAR3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+EQu8gscuVKJ8WlDiK1FaM+1D1aaqjPWpVU2E+NlmEwIgarb+GLzUC3B31nqAAFbvECPnrl2/hnKdB/AAANhARkk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.05f3853e.0_1590082383547_0.3294322457198251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/ripple":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eqf7Yzkw6/EJjFPu51FCne9MRb8ZyIOtIUYGFiXiRdbEXbp5plubF7QNxJF80mc6t7seFv8e4fdKyjnsoxfZgg==","shasum":"c1b892a8d621f73d935a3b3e9fe769cdc12b0ef6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.5fe61f4e.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwmRCRA9TVsSAnZWagAA10AQAIi8RPJXW1drrjWv5mX4\nqBao1yLqOmiCOegiMlZ8tFTgMGF+6VKIzbf+qvjuYSzlU19PUWVhpXVRiG7T\nOJktF0rl2n1pK9R582HvCfFLzgVdDa7bNNtEWgnSE348hLHxEjYmQHQJpq1I\nNti8BeImxf2EBWKi3lwy6UAt6mcS6uZbirHS5aYson88dokPPjHezPcSOjRW\nngSsaHzHs36IdAzVmpBZ6JJPByN12SY4/cnOwBWlJyzuqqB4ayWKDFTqMm7+\npgQCfGOPl0HXX7FEBr9LfxRCAWjEvTBrmhkfgeODmova+z3Ic6KaQ9JGd+cw\nVFeFc3rG/KNHqcTbZTbuch2BU8PNjXSX/KZoSvP+OEFdP3N/u9n4a9VuRvEC\nzzDDaBKanKoOK5Mm51pVUVxD6/6uOiF6tTGjii+niGacgTIo5f9PgVQpcSir\nsw1TXXW8cvYmcVGk3Q1fW/dN45TEPRhieegn/7W58SKrsPaeyxKzjhhv4xcR\n3oCzb6vC228d4zrFwRcGn3mmByhVll8B7DBoDpgsq8LI39sGr5cE/+Aytfl0\nnacYtJlpCC3NALVdWqhJtAZpa0OtyptczFfJEGs28pjP4IsMyyiGxY9XNUie\nvCM8lO18yyNrTrmFbcZphAJVOiaM68Wxx6A6Xy5DFj2YWGNByfFJh3eln02d\n5kq7\r\n=h775\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsB38czGXaqd4dNLWt4f260IRFgI4th7zDxD+/wdlgrAiAeXrnDTpinRmmOyrOJkBzF8LnniOexKlTQyvSiLqtQUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.5fe61f4e.0_1590102417326_0.5427584706201474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/ripple":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-c1wFPhrfINc/WGCUP8xUU3/x57QQJ/V462O5FWTvW3zpvQ5lDYHKSJfGPJxs0rZT1JaZihmByyGnaQYrf2hyig==","shasum":"23c29e3451a33e3e097d1475047f45d602fcc903","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.17d33745.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUArCRA9TVsSAnZWagAAA4cP/0SqpEh6lJhJmxTT3aVJ\nbiXzfwINvjU93G5Webq326LUXWltrsFrq7oGwSn0GUUCmc6DOlS4HMhKJ7+S\nmwPh/IlY1879UcETwH1q/QTG97j+sj9i4Mhf5FC4jJk/BFo+HzxZ2KjdIJD+\nbwjZbHIu50ln/+tbKkSCpk6Op8Vw5NgOhB+jeXm8vLa3XBsbTeLM+pSMTA6F\nzbchCSOVKTtde/AEDl7rBju5xHdgewVM8h5XHrzPlvTXLGXHpkfu3I6eNWIK\nmDnX5MmZsyCuzCbyY5YvnbGn7TU9HC+g3RnlEdU41NVODGVqCGZbHbb4xKxL\n1gKGF7IocpU44MRGdaNMpZcvFYw9om/U0+gzZHZ6/sDrhBbQJr9EFbAvkWAY\nRCJQwmHNJhYl9BEhqjt8RMPJIvENdrtKRIfvKiVVdHmJOC0F73UZD2VOGTat\nYny0qtsezzc4hxXFtfJcIJpDd+ei6XFNv0ebqEDdvcxZPNjRwHy0+N2XnUab\ngxoYAG77PMBC/LGOB9Yqi2FMUYnX7sjjHdHBo8xj8vQ3o9ubQ9HjNl2FX29o\nvUruwfik5TujX/W/iHTAxE814iD6KgFmP+d87HnqCCLKa11DpxvSMWXdOi6B\nEKeRrTOL1WL/yk/mhxd6RNhw8QBHG2irSkeow0U1arMdPyQ96URylCn/Y9l+\nnx0J\r\n=r3Cs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFhnyIgQZrsA/IoObg9cu2s186ryondttBNjjrualtjwIhAOCOE1ePaAFyEUFlj0a5+OtE8A9aWgKadxDw5nXRMY7z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.17d33745.0_1590509611172_0.5887227126740142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/ripple":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-r3ZTCqOPXlY8aAob50IuDzEamRkGStKhOAo9LcBgO+qb8RydP7pLra1G6DsV1FJwj4DVGTRVDRCUAT7dXC46jw==","shasum":"45eb5217bdeabb5c3a9965b4755182a579638784","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.e8b52f5b.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMMCRA9TVsSAnZWagAAIhcP/3+wSEWlUOX45VzGddU1\n6Na5rqahDqTdUTFuNsuTpHzCLoroRVcu5BHcA1hUyTTd1sHG3u+QG1BMg3CV\nyTjkWKYvEOSU3ANciD3k3cVtcu7kMf45I2xEQBKEluLJEjoxF3u7pa0U8imA\nI0F2A2Z+3H2Yb9NHMTCZ1ShOhEx3gkBPCcgFxrfc8UywZQN+EQZUTydTfPZ5\nYe8IJASF9QWyhHimDBZOehZa0mZS5GpvlZFxhbpAhLQtejm303SOlqOBhXat\nVvqayBBRnFHRNGumIDDhQ03c8muYUSkDFjAj+NNrvyMbTno6PbgmVR0sLeMy\nAuSN4kBqM3YTCZ3yxURPqhHFH+h4aly48hNWasXaRGkNDmL5Qeu7U/8MCeRH\nmLqs09euhVwEs2GJ+Ai2PBMhwTv+2+zpE+aIbCIJdrmmsQWwJpDq6DraFcGc\nY863TfA40Z04Arm4KBByl5N4ZEY46Nhcje9k0C3tsTV+PfZPawsBtmxK/vgN\n6oHpHcRhoL5Dnz0z5DYqk7hekmGaxMDwCPccmyWzGBs9geHn24ntK87WfYEV\n/HmLxbF8w8hdvB31g8+ca0J1Ig72D2VsCFEKuBAn8QsFwzQ1tleGK6Qnc/g1\nM1Pa4OamZv4aCToI8BzWfJcjPPURdeni8eNkSdIpRPhc5EWTkbrRYr5pQBcc\n3Wsn\r\n=vJFG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDs+67f0Me2Aay7olkVmWQEKIOY3SS+e7kjhMpMln8+QIhAP9nk5kLshrylGDk3exSh5yk9S0s+8iJf+/v0smj9DzB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.e8b52f5b.0_1590518540378_0.42150474172581887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/ripple":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T11QcSwjbH/mWERx9qi7myqttFMdgtXkNLo0p0biZxl1wn4XYX7tOpK0vKl7VTUjkRR2c2D8s8UoO9UlIQwtAA==","shasum":"79196db35a02fa35e45c429a45bca101852efd9f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.09afa0a9.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2WCRA9TVsSAnZWagAAgWAP/jNIw1SAyELQpfcKkbwa\nYleXwQJBSUq2bReECzfq6H7lUbnvqLhQ/2OYVGZal30+eaPNvndmzReOIzFB\nzxq75ClXZxJDQQ5PuxlvPTiiNYA48ZNSftHHd3cAqQ1s3mKPyBVbSD7jqupX\nK0u6n+rMltl5vJ/Hp+yeqkeDaz0ZA8GYUgYNsym4JmsIhZl2538PcDCNGcGU\n1I1mn2PqDdlnmmfsawrnsE0EAObVfiaBt09zb9i9WexSFfeaSmZehWLYArmd\nxOFqPP4Gmot1SEmXWxdh+xX/YJwHtUgs5JRBvikpUo4Fz5XPAMfbzAiZ702W\nfhi0ZoFvokVWOoRBO6YkWto3CY7ha5DSRcUQNZcuRQAmsG9W06GmR4aNgPbl\n1r+mhmtm38na6EpvNaRr3wUPr1Lsd4PU629vq9Axo9vNoDBBqtzcluRzVa7t\naWs8SGyfGoe9Ocmtg0V/kNSgYzxwZbYGx3twswpUFBjKWdkAgi+A5X4tzbag\nXuJeW/eIL3/FPxz7dvbJ9ch7/QXTiHP9ooHtW0EkX7lYmMwCMNazkNJvhw7m\n/qow4l4LIcc3mbZtewrQK+eH1QOGbw/t412BGqFjOLGp2FvazeCqiUkWG4Re\nLjf3RKyMw3eW6CUokNIkM3rCQ6eIyRbQXp9G3cYR2zpH6w3NE02Uf6I3ad92\nkK5F\r\n=IcjD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD3HjFMwrX+Pu7hs+eiZS1Q+S6e0/a38jP5f2xdYzA1AiBoX4SCll/j5aNeBPi4tTY0fFAX3uOZq5CMNrmQFzH02Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.09afa0a9.0_1590529430103_0.39861638663488397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/ripple":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-twc7uCu34E4KD4y8I27XSCTdsUPfDIdgQOjnBQP7w0XWBEOC8ECZJrrO0KvnoDcidfEtzm3yXtu3qDHOoETRQg==","shasum":"c4ad5dea87206fc06c6ebf50087f670af1a22be7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.58bc9166.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSLCRA9TVsSAnZWagAAj5wP/0KBIkdqz4H1NMRy9YUO\nmkwmrDOvp5ZLjfDvACy+rP64wG7+X//0cIE2tdcSiV+dciPiD88EZ7GrVnDj\ncRVtzdYr7IyxmpyS6PB6BKlA01BlIEPqIwari/M+O2FthAtqLCFr/yQrUPQC\np/1mdpDfDFD1ysnHDYZf/s1MUE26/WUj2AR7cE+vbcQYS+Cv2/I2E+rqJYAX\nA7SZNQTq1Z8LB12fW3pHZ2JPdxq6BB3fdobsdLYyBsPZl6duGakPSvBsft9u\nm+9SgoGXwY/ARkdlPy6tbsaMelBIbAG0cWKqh1Ml/Hmk9nz6967XuBpL10TM\n6VLQwYHn0A1THIgk/XBG5ngmQQ3ALj8LTcyHQeu+yPbvJdsVOoUEQZ4oSVDw\nx0MEerWGryypVmC1H2aD6RTlOUkSCJDb+/4d9IeHpQs1e8xNDW6B/Mr3WZA+\no6Q6CvstnOESpjHI7Csd3vEmex23j6ksdoCJqOUBoDwoCaNo2BVD21q/7yqf\nUdBU1GPoH3B1+8tODqdG+6HQyJBBmWodREtm9GC39gM0+RUonej3xgs/sXRo\niujcXdDZRxInUYt3uft9DH3OZjCckAwD/MjzV+lyo5Ch3Qg+No6MXAawG8aF\ntviHaY0tbfcOWke0l5qi7Mso6O3oZTXa3S92ytL5ArJP/VfvW8tDjGZL+4YY\nLsKY\r\n=60xy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMpK7f0SjLA2zxh9wyLdMNJSkCQnDA8Hj9XPcJekyE3QIhAL9JvDJ3caztklBEIYf8qYDv4J/V2dogQ9lF8y9GPYLw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.58bc9166.0_1590539402710_0.507035979303758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/ripple":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WJ00q4o1WEgD/Fh6td1PXt1X3gNfshWr6jqocGMHxnJwBqzqxioqEi9b7BxEPZBbh4wTg6P9vuKAqHyxIKwheQ==","shasum":"b680091e62812c354ad977ff8ea7e9e3ada20dd2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.43bde144.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFrCRA9TVsSAnZWagAAshMQAITtMxsYidcVo6iGeR7S\naVx3LohTrqadYkQp4Lsk5Xtx+8KKDr7/6oII7mXrQkvMW6YiZVjRsVWSSuuP\nCMTpP5+4fCoBX/LuRkI3RoE7cWbHOkjGQIg1HUNAqy1f4Du81svBSFBmCGby\nKy8LCGM4V6X61kWoQIsO/xxpe3LmRTWpk0XTBNV2am6MktxvNzpKvlX5e4qf\nSe8vFrlPCWZ1ZixtY2y02B48vSempEclqxax3NQOh/lHbwbx3DSnDI6z+j+O\nKUfV8NFkNqych9qx3o7CBsc6Cv5Fr2Z3sGtL/cd0Xa88qQYn5jCXxXYtDRTN\nO3Wts2SbDLVEL0YDu9bqm4Do7O2X97b6pZ2UzWUHSiG3M5+8E8m7AOjKCyWP\ncnseUBsTlE75wI881TbP0hmXUbAr1VmkC6NpIEoZKFvL7FZ4HYx6JzolSSQD\nQgKkx/4IPYVHrRJzx67wf2NS0ySaa4xAyCKh3llacBjTwqqkdCYJwasMbk1a\n19u9hLMf0E5shv4TeZ+vCuxUiAESiBeEox/VNrb+K6u15ovm09WZCpoEXIeP\nUtlLl7nAz/DLYkwLFqv+xd6zCZ/LSN0cSfUrJdAXxeMiR6ZEB1rIIVAwRH1F\nZeALQp1rpMTDq4Km9tLjWK1QhJ2jqpbSL9mQ5sLOLIR/JbrJnnKuV4RV0pnm\nNSet\r\n=sbRI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbZ75/FdHiLF7aWzYX/4q4h+wMZ7HDQmuitbV/LYiirwIgQRVts+9cntkktgz7dH15epkTeOp/1ODL6KJyZPFWEpU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.43bde144.0_1590604139259_0.06000667749876665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/ripple":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l7ZpHsalqgBWhNMASBX+dLhAaNY8xOXklnTdHgX/g8OSEW7fo59h3LFfN6p99i6j7WTizKKzxs8VUb67d30PHA==","shasum":"5671d61cbfa01f2bbc29818c51dae8001a46ba83","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.51067bbc.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsduCRA9TVsSAnZWagAAnhgP/35WPCSPND77u2dk5hbf\nb8vsPQheEWpTCq70lERsYB4eVtqnpPYRw2rbBoaaC1Rsh/XW3/lt1DLykXiX\n9CH9Z6j2LRYbM2WY56xWs6OdiIXuPG/h0Kzs0bRZ1X85RgvrvFvjV9t458XB\n4u6wzYHW+HLO4U5oWAULLO3Xm16Qss8qbAcKvITmXMO1nNM7uHDMX0NIiLFQ\niU/SwGuQsfqh0RVW/sJzyAXbHZbZRcpREXEQxnF2j0GGsRvi7UctZxlmit5R\n2JSx3DgFKKJdw9W0qHYRjiaMnnJRnRwhraigE1186oHPzK0lAl4LCcJOZUl6\n/7SzQWICWhvzcxgBTQ9SwTxdZKSo2DZuPvWSfHoOMLTjdXuZOqYkOf1kMUwz\nv4APdnqx/KmNtsriseUlCUXjbPiL24bL1d35N7h6mI2saNiMaOIqou1mDy0R\n/k4ux3aMMdowXXtBSAVRm3KY3vgwbrJvnpKTyF/DDSwpylHmIsxrkSLaVTE3\ny5naUUkGXVtAVQ2XOSL+7NZSEPBW+PRM0vyb7mEw9fW6XJDuESYX3r5OsK6x\nGEXDfENKzp4IKN+4JqPRMzgNPhDi9IvXf/wGh+sycFGUrdIbvmgks0wYKg6Z\n5tGxK+Lbe4/21/BxhDiNQJKksndvR3d5eC0PKHMMNHkyiGUBjRj3pOSxGXID\ntf4j\r\n=6twq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXGLUurvuFZxiQqrwZXHUAIo+/YZBET20bOuCrvFgotAiEA/8f4Hc0e24IP0a/H9L8GOrrQzNCGMIbnRrG+VKd91D4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.51067bbc.0_1590609773761_0.4907734675929465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/ripple":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rHcnD/MFIkYVQUgalNW0YkmQepLOshZ1ksccc8WYgKYzyuVx0VqojVwK7XfzYI4UXt50VZYbpsU39lp6syh5IA==","shasum":"9a78950f361e02c045ed63190f7bc31238e41047","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.92751ffa.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1NCRA9TVsSAnZWagAAmDYP/0iabb6ASKBsc7uw8zni\nqVhf+YIUz6DAB8Vw8C+AFlkAvjuG2nDK+bJKJrxA4KLm3ybjaHjw0SQbeu1U\njNYS/co5D74z5hongft9bH57+0WIwg/y9SH6Mce0btPyMZiPm0fraGzNIqtg\n5lfnoYOxUeUf1VabeuHBAvtV3mme7q7QGXjCBxBwYIn7HXx05F4ATXIIxMGi\nWKTt/+jOpjk8SawgSfQspkaLitLboik9MasjjMIhtUb09BsvWs/REMOdDC/o\niH9QesilDQkZNdMVu6EbK2UvZbAqMfwHOqC8Lk5Iq7fE0YPh6g7CJJwWyzUO\nOxYpHlpPybGGT+UiUacg1bJK3Hm04tuWt4zePeVaNMZCHedpoHYtXbgmfKtN\nex9D3PI8zqAEEQ2iERd7vf4A0eURfEg08ezoa3S9i2/yP3GktQugZmegfsGL\n6e7aBs/dnhNGOkk5/zUsxxqPViRi8atREs11qOmUXv9lK8kokgAPwyh1q5dT\n6JryfqyiwgQGla4s6Uc/nLUhLXF5mKyBVefWDyEV9OICBd1C9dkmeMgJJv8e\njdIQ0qBapBuuMhTw5Fj0Jmi04ghODJYrrJvl3ZT52l5PnOiX2aJeTL2Eqvum\nND0nKMEoDvpqufHZe3uU2JopxF8Ak8O2ZsQL3MQMH492Z6up0nT1KsV7mcff\n0s11\r\n=euk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUinuW78aU2FS2kYjoZotECSkPpkDDf+LVf3/YhDT9lgIgUUXhKPqgiFzMBhPQLaNacrKrfHDbDXInvpEneDCqWzw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.92751ffa.0_1590615373456_0.052371667257738785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/ripple":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T2OjuEzDxwTNJkac1h6l5qepwQ4Oz5b7BeBJeRVrZSRV+hwDiZSRhi3L5TgY6YnQSCez35Ow/IE3mrjjWrl0XA==","shasum":"efafb0883321082d55e3ce4fa9ff63e41a84ccc5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.aa2b40bb.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2iCRA9TVsSAnZWagAA3l4QAJ3Mq2oV7PbM1dI+Hwi7\nXwcqmqQ3NJf0SC9r6ToxuTeIjMWqRqWVZCjbjEEeKOtexDsBIo6ugNm1LL9G\nKsBwcpZD0c9d1Eibbz6sAvRBh1HCipQiJ1WKggM5hzX5Mr57Qtlr6ZsANN/Q\nPNhvUuoG5L1qoAltPmt4r2eSOnF8/C1iDWmDny524C3y+i2f3V/MkSf19Lqy\n+D0q2bNFP5AZGcxZmXXOZo3+ilxhVGbmAPXfWsHwJ1cyMy8Sr6PkvYm3qM2Q\nKEDtfbv8tqdAqaNLR2ZaMwLKFfL1L2CPSpg+3RiOjqD7MWMXIt6ahxqaUhQk\nC0NXri38hfgkqrjGVn0CrGIZftKESufOOUSBv0jnN0miVuCP4xIew3qqQyVx\neVW+0B+fmuoJLgVvPKEQ+gr8n7hCVzV/hOtrynnN53TcgMkUwr8coCVQ9kHf\nrdgomzQokjIxug0fGRg0O4aR7LN8k1U8IwdXd3iI+IM3jgiHg3MIvoIH7Nqi\nFJalJgUHYCGghYQa0zfzxqEDFzAilXAJpxfDzMdZJcAe4t0+dEaFYXlF0Omu\n7FBpAApzo/4HC78KIkRFGo+szwXMCIQRBvXWH4lOcXNcobYdXvIWpS6r0TAs\ntm55yadNQ4M3R9NAOrs4bXRoQZCD9jLN7pmWhpY8ihx7CSwDuWDY/debIARs\n+6NW\r\n=j9qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhmZh0vz0vVzo+7ehM80s3ybvr0xm4BmCjqx6ljXP9KAiBGP2ox0Ph3q6RhTqDRkiNWB8MfH7ir493LBRoCKSjLfg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.aa2b40bb.0_1590693281537_0.7070996526499429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/ripple":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9O7wJOLoAt96df+6zy7/uB/o2nGjRxLrvmJqo3Y20lQbvLHC8+XiOMw9SdVwC/jKpSr44+oruqZQTd4dVEJuvw==","shasum":"308e52c231b6f28a3876eaa2b995c826913381a4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.1a870a01.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqdCRA9TVsSAnZWagAAUHMQAIJ0qCPvGOVH0WyOVdts\nkOoCQcd337rzklEkEDK83b4GH5n8vRs8XKFO6e2J73arl9Vb4R9Tpo3kWoQR\n41/C9pyHhSIOr9/mRcgqiI+3HNJTQOvanMS+UwkQfZUuKmpYc/bfulqXjQ0n\nc8q7HdbRvFkzOPVdX/913GFZvX9nBv2c7cvY00aFzE9yH+0f09TZr1Aaxtog\nY8+8lLqNO79WKJ4aPDnUrBTzmQt0FfO3EbquwUbx1Q7ZwnczcLzssYjzWk3U\nyuG/S2X78kEgvM3oP7RhSsLaTsZTy8usOEbjyfXDCFNkjTWGcAXTjqHaBpBl\n1RxCnEQGNsLw8M6KmFDi7C6PIajVDJk7weX7gIPokwX8v2b9b3ysG15/K4Vy\nme8aU4SWFXGALTXBG4yJCCMy5HYR6iuviq+5+jRa4CLfNr/PxMDqvZl3WbPC\nnh0+lHlIet3ybddK7CVGb4g9OXDJ1jMcqGLiX+U1AA2tDfT9VXRl8EzIglUV\na6MFmY21MfYORORafCW0cWkYeBlUunZQbq+cqp8VCqRFczQOt3jRLYT2xAXZ\nBfCrsUJeS7mNZQLyQ0hXFd1DffRA6+/DGP4GcUxGtBpPEJZSiDTGP0EAY9OX\nijf+SA4Mqi1I4EszFzwbEUi9PlyuJ8cy4pxQLwrzomDGy01rarG7glU7Dy+p\n/kGi\r\n=gkmk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtRAEEl7grhizPnjX1E+Pqjc4Tqds4oQgOq4ebX1AruAiA9zlJG0/ZGhueiYPOe1n3LyZx5xVWmSeR9/wvHKWJ9mg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.1a870a01.0_1590700701206_0.08731506576254477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/ripple":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e3FHBlT4VrzTOGwwGmnI7+PHd70MLVSurAP55yty/Ad3W9co06KR9hjtAXmdpgWPGnpJSBvl8xO/CYJhOQGMnA==","shasum":"c6a0c7fa401e8fce554745e41e61eb81d4a5c0bb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.ad57d086.0.tgz","fileCount":29,"unpackedSize":109796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9pCRA9TVsSAnZWagAAmPAP+wSUAXchor7P+jeepY/n\nyZFpbM/VeT+Wr2GIhAuktf4DnzhrSpcMZHqrfg7Ya+0P5LyoBJObRjq/41cX\n+b0wNd8ziUHE70WoRp32Lt8wI4yrw/lalqCJcUtN6P7NdNNwemJieOCFVI5i\nOHm1MBoYZ1qyMwXmzNSwrn25bVwHNaS99jSddz2iuDUuaGF4033Nj1pwGqYH\nr1QUtLbQCKXNA3CCT+IsS084F4aWihShwo2SGcLrgsuSrsi1pwoDFwmJWaR5\nKRI99OgkBaOUHv+/ONWYbj5SC+WJY7H0HyozN8wVotZ/J6RnxjS7eXBIyW8I\nzfB1F+zkfjTV1ctFXHD7IkEGJwaw5fR2HWetcG711KOug+YcS/RVnZtLpi6q\nFTSFMw3NDu18VZAdRNUKl6wUOkidjsUiLeggmgZk+QHk1sjcQmN0v0YJkf5R\n3IOvIeiI61fhsc/bd53jzVMpEQ4ZK35J/tSbpE2kkjdeTvI78K6gqbES5qnB\nYXvkMBi5xuiRydR/TKtj7w4rpux25PttS9xQrHHb+X9+beGRDD4qAkoPROoz\nB28ADi5gVCYv+Z6GkL9LpVM0p/8ad0LZZ8SPzXqOwHCrdrmtmR4A7S6Dnnty\nLjeQKo1xBOM6VTsfKf22GddIt1u4TQ57KXriOidfsO7snm8v1ziMxb+XN7SH\nEl/8\r\n=ar7S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbz9lAVeax2IWTRjWzvvu/s8eTlaqEvglXLzNShbbhxAiBruUt9R1jMpDN9Y+UuJS4uAkIWcoXOenQab2VmlhmXKw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.ad57d086.0_1590796136932_0.25022836339255883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/ripple":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E0CVywlYcuAcJU0ByrARcwoWs8ks+JE1cSO/qbOEWLar+ZIZVLZeSX7jEVJbF8qPTfeJ4oewAw1NKJQSB+jK5Q==","shasum":"b9cf7239ddc786aa1ee5059d57dd6eb31af3bc4d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":29,"unpackedSize":109808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqGCRA9TVsSAnZWagAAbxgP/i5lkOgzMnejr4QzVhj5\ntY3olDQ8lLkdtdy4wAGr+m6J8aeX4Vz5CrPScoGxpCJcjbR+cp+pj22z4wZ8\nJ/F4z5CKVIDftG2e3bdKCXhgjzeJHu4/IE+FJ/gLZBw/sI0Gl47e8UyUuGA8\nNHrBEqyJl/3nXphdiof61J5I/J19XS8rhIGZP009EW9DiEP/UlChc9yGhoa+\nAlHd0CmoiXnsb7vfvQKJeCaVbXgDiUj09NfAdJRHe+2WviF/Upwbn6OIw5ZC\nYWwZcuEt7Em51wo1I1hlL8QW+ZP6Mg0Cdtl8+YTyU1cxZ3sz7DlgUhx45flY\nliJ/LrpKETODh/1goIFtreaw3g/NOF39A9Yo/EhlXP8hTgTPXfan3W/KtrRn\njVFcYyWOCnuLDxpu4y/Z+8HKOEJVlTMENu1Mc7aaJk/rmLFhvLBpMTlqdO2B\nlmz+chw/3zZiSDs7OC3dB8GIncLBtdjnBoNqJUqWIgnL+HF6n3CvMcceQd+b\nkDB6xNHt3rkAFckGnprccTA3y4AJqOLrsQJ8QJUJI3GOJv5+e1oNheDmiaA8\nWPwnPB/Mqsg300ZvOhkv9nPWYckzzXRb7jJTy7gFziPJIws3SGuJ0gl+JHsX\ngK4OaTVJlq7FKQvC9tGyKR3N5nR+w++qUdhlbma7sV2ZTvXNSeHBh0UPjj9M\nqie4\r\n=XUtz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDueJpjeExW2ooSOrq/EiFDYkr1NBdVYeUVr2YbVpFZ4AiBtWjuix0awwBVve2+HUK6K3WSAXR1EFoI/KaSQjPnttA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.3bf2b4d5.0_1590798981480_0.2976548655467728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/ripple":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T6nOvwI3wVAeCD2Qs5Q11gqOZY5dcjYiclboAxiZ1O1tkY57U0zhSZ9aU2bBZSHdjGbRA/ROoSL6t+iHqaY0IQ==","shasum":"204275117ad3d6e3f11b30f432b7789282878d2e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.ac05f090.0.tgz","fileCount":29,"unpackedSize":109808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cm9CRA9TVsSAnZWagAAM/8P/0LNbbdQs0gdFQChiW+1\nvo4/su3fE7Dv0AaPEvQkM18rC22VslUm9HXcg39QN2a8nZYPOnDG3TSiSFjN\nZ3EMJ1Wxp7DV8k22d4M6hwbZ3HMzqKIhFH9P+AkTsonbGl213sy2uH9XZLkQ\nivYdJSRXkbC5YLa6H0MUjaLVWUSIpvmV2KbCovDGJvF2dxicUIuKuaF/Mpm0\nQDIXVmq+SAuG4veTNWrdWz0l9Rvad34ukvGHJMkTJh+tkZfHXML2+NbDjivb\nKGq7tG0XxVH4tTGeIyR06KhXb3/lnhF60pLy11FQiTrk/KQEtcjSc+UoMJAl\nJixXjD6OmRbOup/GY3+kfCfr8fpelPpNcrRnHSA8PHPJiQmKIxH9mkkcL7sQ\n8eFHYhP1IObBBYrPvDSynTFNcGYQO4/KdwiKsg+dnbX9rQ37ApKGpTGgdKOc\npmAvu0lWDLiFpVOyDo6MM8daZtlDC2XJJ0g/qBnvzRu9O2Nj8PHN3NUCYYWe\nzOYZ8csqAstw5C2/FQ6N1MVW6YB9SYahsohsGych4loMZlXHhOwkIVfdF7/F\ns3L0/QE7WuPyzWpkMluCsP3a7wXE7gkbMFPs096xjdogGQvMHrvKXoeGS3Rp\njcJKxuhV4sApHfHL10VXK0vFNyz05UaJf/ZkzcGXv1pi0ngyNwvNyXwKYOqB\n4PtU\r\n=KdKT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANQYRkVbq74F43dJbEnSQRSmGT+ALCIn8BkrewmN5a6AiACIe29ClzQ8QYteapxBbJ7PG1SG8BbXTe7XO3bnt0uHA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.ac05f090.0_1590806973284_0.30456181781783953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/ripple":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qpv4DHU/0LC5aX/T6+9xTsWv5en3bb7VdizOZ26Ehc+kdXiLWBdsKEirAq4X9s6Ln0FC4n+Qz3D9z5fbTtv8fA==","shasum":"877758f3db43cb077ca3166950762481f05b392c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.0ba7b095.0.tgz","fileCount":29,"unpackedSize":109808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctRCRA9TVsSAnZWagAABdUP/2zVYQzxyTpEYswOrLxy\nPmPBPrzduVWzFfXwNCm3hu6xNZVc3NFelyCoDhm6tKYMtGFbPHTn03nkznLQ\neQlSwMkJ1zJDB+DVJ6AU1d62R/nkMIlGcZS/TBSM6LwdKeqJ3X9PWgvMol5U\ndB4JnRfrW3T8OarMh/1RAl++YPAg8glap4pE9ThiIjAJvVNqCgSg7Pk3itbE\nfgrTzqcGfZlyKVzFXM8t4EP1QiILxEI4mv3MLuKDkCyWdBq/0CSGb2KQUZEn\nsdVcjQfQ2U3y5ULuguwcdlGY37yWaG/+FcLQ5hB7a7ms9kSG/t9nqcJl+y56\nelQYndk2qtjkU4X5DbOMuboovswMEB/SYSB9oFS403wHi9V+gihOoW7RHXfN\nqer6z+NrhADR9YFQuoDaRZX86zlmITNQU6OyXqpRfYfvzoh3jc275qCKLquB\nIRoUil7rlMOQDdvOpKSeR2jRbc/ckTjP8omn1WPAgo9+T0//ePveoHZOI0ji\natgpzF/jXcLPkH3knA7iEXMnAmqwvSspdFQ+KEJiQFl9qGNgx7zYq6m4nOnj\ngz2fbM6AtdsUshlR9dwC6XUBXmPg5rJnbH19Zzb4c5iX459/Ng2AJxGj73ew\nBEhqmX4SRYXc+fjlMoA+RfSpJG+uBTCVhl0UbexB95VSi+lnKaqvIMFLLz5x\nR1gF\r\n=Ryyw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjKsgG8UhxkgDfElMiK4RqtyQNJk9oNjOIxj3gKVsnOQIhAMju6x4VXGmv4eMUNEWybaLtQ4UDmxVoDmHHna3wSbqE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.0ba7b095.0_1590807376752_0.5589071682278259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-ripple","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-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wQ+stWin0euBCB1fBlALsacNBx+FtFPst2R8r+Fztaw4wVYevtExeHQxETTLbvk06ZqxEmLVwjoDze2Xa8v5Iw==","shasum":"9af052f54daaebfc989fe39d7639e158494789f7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.5eaa9bac.0.tgz","fileCount":29,"unpackedSize":109808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8fCRA9TVsSAnZWagAAcL0P/jFkOFJoDDhNsietwt7i\nNmrMHgwMz7PAFHOdevsUhrtWfqt1QhXnKn/Uunj6czOL5J0ozCyNHkhjtro+\nCRSXVIQofiuBNIMZpOgY2rEP/85mLaIMbP1vmSAmlJp50EVZRhG8QHUeCkhj\nArGpS8YWY9/XrXT1X6ksB6FwOJ3oy10EzMqKglrHQc8VYJt7B4ES2PjaixGj\nxGyx7Ie3X+bRgza8Ejxjj77LoSQYdiOGvN8l0EyFMKSTD0BUFIk6fmm538+y\nMCbPe+py9SLRAMI2tB8eZEAbPDrs76wckRBb3PzUf03Ulw6+dQdwKyHWBoSc\nwzC+jOSLf78XjrS7tiAhmSf3VA/bR3Oynn6XK87h7XJqzJLMMT/+8LGkrmKm\nE9+qzHcZG1nbOi2LjOKxLHLfeEmaZlV9NYCaqlsE6gEartrV8yEpYf15xlME\n7luGyfeDss18RHzUp2eLYIfRMWduGv/bdl4adS1p374wzfZYQ+24/+IM8R7p\nG1jE+gkQ0YZY69TqPqDpAYWKWWZcfMhVU+6Nb4qKzVxqAkCH75ZPB1hxUS5C\n8wWPPcrAKLNbqNeEmR9pSIiM4i7bQSQp2OwcLRCLBxkZeVaI6mEeExY/hiSs\nmbgoMpQD/Whb/uqo71uKC7tjpA9EEzxOHy6dApLt9L3fQDM4p33fj8t2jh3r\nKWZN\r\n=RqMl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGW28tVRoD2VKjFPZEI4H3bY5Ovw6lD5friR3pMNSjdPAiBfV8FjtXlibJesN+Z2SWGUTOomTmZ7OR/ZQsgGAggrsw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.5eaa9bac.0_1591054111462_0.14778932709714887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.5677ac20.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TvecFLzc02gHEfOJbYGLjSnIZ1tuom/JkrOmAxg4LpevIp1ShV83jMzD1yyEPYBY5YUR83pb4lAbm0VIBbHVZw==","shasum":"e7fd78b467b1ef8d6bd211535dbf885a144f4744","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.5677ac20.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXBCRA9TVsSAnZWagAAy8QP/2JA3/yHI9VrEaz8MCzL\niBDkXKC7QHtn6hTCsUYtntHQftD6J759W2n9zVs2Z4xl7NRwFTSWYSh/bEdQ\n5Pe7bBf08/RoOkNiFMAD+vr3EJYpyS0GbJDb2KjhvQ8mkKLhSMn486af/kkU\njKeJvVVsGP9x1qqx+8fSsTQqo7FpgegjWIVZ46dCSrBFcpPGDzIxNtIWPWlK\nnljn65u8VGQ4ySs1dx74mvUXBwtouy6fJebjhqhoh11pgPD16rqhWd3qFfuf\npqfw0pxuklYXcUYdCqATJO7E264EdAbdv6HjGx//IH0GbcJprEUiem5lXNG2\nEGel7Q/lh3jAcTmo43CM6Jx1M+5La15MdMHR7wp630wKvjFdom4BinzzZJhH\nNhX/xp8Ft7EDRXz9UE7uvwMBGxyqhDllhe/fTe8PqPLfZj83XHi6ePrAhqDp\n08DKhO/EcK+Vc9RRq2G1x5ZEz3LJU4P8VrsnS3ZUKA0JeMxvJQ6pwN+LcVpB\ni+TPjt2KNFZ/JqrnJSGt6gNR5LA5kL7vaMMwVq8URJXNKXkWJ2QEoghaMhG8\nypQY1hKlLblaYdaRVSOw/783hhlw8mmm8A3+eZ23gkyZ1w42u2XlI0qQdCPz\nuuTZ5YkjSLJzQIRK+06lRSiuWMYeY0M3kw0pFj9ziVzrbgoU53BModloCnKq\nmFJt\r\n=nb8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvQJlyJdHc/Jz91Jpuh/J1R63veiHEt0k1btDiS2zANAiEA9vXrgDALzZ9udJHNKONaNY3iFtsK8mZsZnMtSM6er2I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.5677ac20.0_1591055809308_0.3730249163635708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TNT1Y+/xXvSCXx9/UkZghbvWJrUKfGOQ5qkIHw5yfDL/1H4a3Yq/55BMKUykwDrqu+04YOgbbcMfrQUdAUxWuw==","shasum":"a41bcfde4a65f07238286e4d2a13845279a4d230","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.7ac6bff4.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoaCRA9TVsSAnZWagAAx48QAIDT6NCAGUoJzIR5yy6K\npEleJKhXlyq79SXZIeS5HblEFYrnB0cPrfWycJvyDt+6cXj8EKdp+60GEkX5\ngR9lSuy+i0QUxDuPCoExd/4y13XTOZqkcgFPaEH0a6DQ4a9N9NgFg2ezDNns\nfKZfT7Jc8x/PNeZbJ/G06+6UWi46lzj/E5QmvYfCch5iIT36hCT4/r1qGU8/\nEpOUVNovq/HzN+QghLWQPa0c9FM9OeTnXjIgFHWbcItvsedZomEEM63l5IPn\nLryYrYihlHsrnEhOhvBlobNl48kOZxfFT5rLdekPIb4cYsuN2hbo6Ak/vgYF\nKPYzr57KmYXXUWpg0oNmrI0Euq/EfMCdFVoVwXacZTwRt7f2CgCtCy81JLWF\nUlr8O15RruoauF2OaSRuKJJ1JvZPP5yjChIwY94yVpfefP42kMaVFYQq8e3t\nb3chSCIXsQyYQfQDOS3VHmb69+gBK0isPc/uxtcWCYoFgqBMxflyxBs0HDy/\nNBqUOUfE64yEX83EtKVmzq1f5hrX2RDCc4VgGnGXGTjA6UBVAR3eJ+jCxSJC\n7azYqJhyHu4lJQMqsuvtfKrEnpzNL1czpwR/0SLZDAay9WNOJiz9YV8Rw3LR\ng/HLcJp+JwpdNW4JI91T5gIxmRtyU57jFxcQjMRk4qWIjkyLunjyR0sf4747\nnQLP\r\n=lKRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDk4hdNaXyJGB0+tY47PmFcHJ4mfpkeCnlqCQWvppAuoAiBByVU3wIUSQ5n8odGYNAGFSWkfQo4JPrkk8edLBwUq8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.7ac6bff4.0_1591056921797_0.8486964545502649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.d45622aa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l9oXJGwzbGt75CLVDQKrEx/PH4ktv3vr7sAWmQxAp3sTFh8IAN3x1ViLhNW/Gm1b47lOvK0x8TZM0yLQ0gRWZw==","shasum":"9edd249f68010024c638f2d1a91e04d17aa80d90","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.d45622aa.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uScCRA9TVsSAnZWagAA440P/RNZravNr2UioJASbUXq\nd+s19dlOwhiZGZlsIuh58NhYdhbWrWAZG+hwdSPmv5faxUjIJsDJula8hoBh\nc7hnEGSA1ABlACjVKkc09W6YyRavmj7jNlSZgNbXiIZR+zJXxwJqb/B+Rz0O\nafkRR/1y9f3pn1lleoyOfoHfvAvmvJwrs+i9nkbH7e+Es9QIjCCrsnr/uvLb\nq9Klv9NebQ39LzRFEXYoJLk6K4q22lQRIxbuxKG18yBo/Wv7U0kDx2oxlVQ2\n5v09KAnKd28bJcclkRfeAADVHAftnEEgYwYmgVyOFPOorMmxfsbvstBqKtjT\nggJUoPoEQqZtfR387P4smTkryGHQQB7bnUy2ng/5uWthr0LsvYzYEbQrx+xF\nOnr+5Yacr2nw6CRJCJoF2M1YjQ8Fh6fM+1QU0mOBmAaLXsNeICNOMPnzgZd0\naZ+16DBo94jg6tUpxGuc75GPbeZFDzLYH1c9I9DAp8rItFRTRpHLdqF3RpUi\nTiGCU3AH2zWkca2mR/zC6TQgq2l6s6ohSk3ie6va6wsgMY2VNN2VPNMgu521\nv0WrK4yWS+AOQz8DN7WJuttjmKhJ0IE82VLrnvsNfeHSRLVxRmRx6SNepJiv\nqdm7LlPOiTmmzAjjzrFWujjJ19NUieBKRY0VACJDLjflN/jB0KJjY7SN5wy5\nzYGV\r\n=K34M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeNIzoa6aTQyy4MLxPmrsb4e+5fy3tXQ4L80zx9OAuUQIgEh1bxHjSAfMHT0sG03hUpRAPVxeKJyfUuV2tq7I5bZE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.d45622aa.0_1591141531930_0.44995194742806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.dc26c709.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D/n18xBipIFoH0H/36nO55xL9hEJmvknEyzHwkj6ptEXDQGI/G0Uj6LJKGCrq5V0dtsMzNx9X6ojw4JLPiMyPg==","shasum":"4269c9a9a123aa063be8e11dc53273438c9aea0a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.dc26c709.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkdCRA9TVsSAnZWagAAh74P/iv4moyuklpau6MExOo8\neksWSBcHtmOOitMz14U6x8poo8GwTHGEE2n1LHwQzXy6wqy+BdtDD2fF3ZJj\nuSpMki48nrbJ2iQ/xqtN11ADN2Be0+e1Me9NoEksA9aLAkg000c4xuR4WrVU\njd2dUYyZxv0JnniuVvbcXdDf0DULjxxpEqfhpQYlFr2aAU+CWxuVbxnJgntp\nrLPZQOUi0mfeAmajVNxdQN+t1qT/Y+KSaivoxhK1wtM3Phk8fa2B1kII2szS\nfLgUaYwWhC9gKH4gylGK7HloiiT7O+x6AdOIq6ymp+H8jATajV016t0Y/Cau\n/Rp64ucFel74WRDTWXvWEQfzPWgfGrq9xozcY8jK4Hh9hA3uRdp2At7NErHT\nnD0GxiOOO1lWsJG7V9m/Aw1PtWOfv9SBGbcsdrtbt1IiZaSNVgE4ibLpp/Yu\naFf2G38hRMoA4IJCbHbDTRpWoWpaET+GSJ1MpfGuBCSBuezdmLKMejXuynTH\niMJb46YCAcb//DwbwkVZBX2gRH7m4Gztkohq4DQFkNbwehYMFRoLAI2EJTPk\ncBLVYozYWwshTv0Dsr6ZXuA7BGqQ01kgEz14NO74hox+SgdoMQ5F6MBKuEdP\nscB1BwC2fzPzvCyFr6dmdo2ubegP8d7+9ul73vMym2AoLse/3EYCmg2Bj8zs\no3dr\r\n=hwYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpldsenKhglVZOJVVvqFvOKtYE18Xl0nXBVntGHilvWAiBILnY80Yn/zQaz5MT6uq8upa4XL3JVUEJZB1VG0PozDA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.dc26c709.0_1591388445367_0.03324916780687426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.b9baf6db.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C/JKoGjNDNvIjHtoNpifXTdJNf5k/hz5GZo57QpgYEH8s9doMN7sUyO4EFHKG976vKkdstVqQiK72gciplqBpg==","shasum":"9ff8ef29135446c8a7c2acf14095280f1344e526","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.b9baf6db.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlwCRA9TVsSAnZWagAAE+oQAKG91d6ef2qV/+Obz7t0\nKbjkGGhpcdUhpI6BwrbE6/UbUE/pIev1rLJvrKoRT6TkN2ClGc2V6rCnwWta\nQ6RiekBZi7KoRfolRf2tYZJv33vSlbjcDaRYVT6RQYbBoGJgOROcEV+78pWz\nAQ+eMraAAy+Vgl4pXDBeQdaJlw/wGO2gGFqxVAJz6taanAd5UTiioqxaM9zU\n3GvWkkQEh5x0UotLjNoqNjvQW5n7ww1jYXWT03Jox1ngMzZo6cXRm5eBsRMY\n+elQT8oPXR9ufCOvsxFoqd15bBlwNBwtnFs6Lfq9l4KdoQQ3zAhPZ2zHs4Yb\nstNR0oAftR3ifrmasQ8xUfYAt4cmlCv/e9HaV2WO1QJidTScAc0pKwJqTgfC\ne24ikxz8iR0nInz2SGc6h9QxgTHpU0LsbCsthGB2C6pTlFM//JAetTd0M0Bb\n7l+wp7084q2Eoe8aqv/g+UPf1Gs9E9k7hn36Pitxbdrt4UTs8nhIo6TCTR/+\nd7wHXlpnQSJjvY58MeUm+dfWNDORnkUwMr8/4upDsguz4tQMV7c3ztqjqGBp\nnxNewmXE7YIjuV4xQ6uvdYBmBM+SHWtHzIpO33ooqYypoFNmWTejzHxgrpnq\nLQzrgQ5lqfwdFPhigXWHCuq1ofnyPvARLFe+9nnpD+CDqkaLXvDQbgFq3y1L\nkfWw\r\n=uajY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDaQndnMkBtpr7G9WfYYFVy8D6UbreuNrHviz8ptUpc7AiAu74h/J6h0a8GOfYFvflDCCSP5FkFh6rvuDeCTlA4Weg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.b9baf6db.0_1591388528226_0.9922745802299031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vg8o1qvL8sLwMSpueBJmwbEFuCbJSCgfRdnuai8Pp/uoIY5jgmHg4il2nHohhfmpNgE5bXs2Uz98hU0CvpBE0g==","shasum":"cc0215be84d45b32e093f66dd0a2afebf9b4dd82","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s91CRA9TVsSAnZWagAAZGkP/RUEvCEWWUv0IThxF0By\nyMHNUYz9mk1F0MUCcaciF/ZqV03EPVqOQfeYfFJFzmREHMd+yRlW9XSsp7Vn\n7HumRpf5mrcCmolJGBI4TokPV9qatdQMTuOewDo5tW4GLfublI8mWiJ6WaM1\nGxKd9luRjoTvlaUAAJnrbvnhtoSOvhdHYZyBDRw3CDTKEVdGHxwCUUQf6/+f\nsNClHpgBLZwumA7ZWDyJu+e8knkLLkK3oGBl9veUiBjPhxz4lC50zTEha9x2\n7WfDNEqpti+DNQRlk7vf/JbH7g/yXrOoVRfgOtm6kVbMdxVBCS5L+cv1kxmr\nJf2xUTSq4SqPoRbsAym9vZRmottkCYgcUi4tpOgIXZndkRq+wxovxQzOE1sM\nE1Y8U9XORVGod75yq9e223rO795cuAcVydUrAXhuZNhbAcoJm2AvHvnRUJBz\nkpdOLtljHKEBMJLzEKainqje7ZSqN/gxcAN3PY7aH0RdJwuS3cCydhYf2spk\nNUEUa8vIZF9rIg6k+BQDWFVEA06AvwmcVQIodezHWmvCCcXRbPO6qZyQ12qJ\n+MZgHmev/D3WFK57/ZRtFM7y9VQK5XNuwouTP6Nj0rsj2ijKRWH8mEjMF1wj\n25ImphkuR/Ah5GQBChI/vMPK1eG9awNDbbt1nU4ziP21EXFWnGdAq3e5DjxQ\n21mZ\r\n=mr9S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFe+O2QGNTfH2GgmdVPTHW7EknfJ8I5/LkOSPcMfj1QwIgU0+DqY8FcyYOAkKekDhcBoaFypEthFxtcfOqcoaWOrU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.e0b8c9d0.0_1591398261232_0.8990842141508384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.51552859.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oC0NPzPaf3jkWSIKE4vvZ7H3ajV/c4oOxudzzGIoMSgC5hEExDeS1g/ukFEaVMve7FN2DZ53o8Qmqu2Y0ejQGA==","shasum":"46be038aaa02cef5f2892efef56b2d87bfef9be0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.51552859.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRSCRA9TVsSAnZWagAAETIP/3Z6w1mZ0NxEy5wgOqgi\nUcDiirD+RV941gL9Z8TMwd/TuUe1/miMnMCtQhyXjw0RRJOCCZZ5/pLLhJwy\nIxUQ6wqdoNr7rm+gnWhyf2lEz1Bowp2E06pTxOpO69tgN7nPlK2lPNj2SkXH\nc3LyJ7HdCvvXyKZTkayMVxNnjZQM0NnTRv/LHmGHQuS0NCAuQ7Nmt3fYRbCJ\n7Khf4YGom3VijbXSSOWycV9N/LWvBSWUEmHE07FWetcpMfg9bpZFZ6iRtXm4\nlHTWAbcbK/LQaZzcyK0eBAbciqrEU+JD7P8iFPWvbgJnxVVdmX5MbFUy8AWi\n/d2m9sWKo+ItlypBHPos6FhTv99Ffwn8CMF+4zX1+jREzuIzKoTaTok+d5ie\n0pr52b0zvA22/G/pGvPInZ6G7EeRjbpSLvHpZfk7ZLEQOTS2bGKx4En2RhvR\nOrpufTM6LrPIYULkdfokzZBNuHjh6r9pOK9YTxhpH6BxEW5AmEncCKrJddq+\n3bJ303+25y7lnHXd4yb4nOB4vZgY/LZe3w6msc43qrHy/sPhSUmizeuyR+at\nU/5jMTnUHbftrpMLvHkAciiZ6xMQQhfgkKNydDowkFL7LuxyBEwDmB3uPtcI\nkoe2bpcprK2UR60uufS4EDvlJl0pTWK5onHIIodP0R8yIr25Y0n7OSVcl3mJ\nxwbK\r\n=XVUG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9WYEol/bHaRmLtXnwem3spmwbyt0SSkYK2EwRL4hlbAiEAoSleqp0cS4ojxyQqD+TC6shr5Pz/sjY6jiMYJnAgBJU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.51552859.0_1591747665397_0.3711654168108751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.2e269285.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-r4nUPtUfcRvmKy3sX35d9BU3iPiaMbsubz3/T0kSNCvlvWWpCuyuT1bs2EOI4cD8RVvRYP/FpgtTFNdiszbFOA==","shasum":"0db14fc705364145e3a2102af138d650337e5a0b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.2e269285.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjeCRA9TVsSAnZWagAA/OMQAIAkkUVm9QLNjqkZ8iif\n4Q4b3/fob4FIhF2JwWU/YQjJN5U0M+CxyIkkH/0Z34Wvl9wdhxhGR6x9Ufks\n7GiDpyiltnkk+Ohv5qmun2PMvVb1LxTpJ9zbeH8o+kET4s54y+yH4yz8oqPC\nUX38LU4HGc063ldZ7TaVrqAVPNe7cqBnyxKjmlIUqkJ6B0H7R5tZwX7EZCY3\nIX2zas+Wf2f6i/4dw6npP9bCoZWrdk6X0xFmtClT3biMuoMb/lLE4Me0EWY+\nTXGh1yq2ojRYbGDRJKKCL5z5m9piJbnujgV0pooIPpJxL4RYZQhhQgpg9TOs\n0ivaupFG40rfas41uE/Ys1IFdloxUPEw5MR4COszAk+xCr/cGWia0O8audzN\nAEouNmLbTYtSbfd0OLrhLXFSH9379v3EwYOT2LjwJ9FfFhNjuiP2/ogCmapK\njuigTYhktTpSh9dnMEhX9AoP+GYVolQ9Wh5hfrRQtapfXmK3rHKFaVcPflyu\nd0DUDjROFTPSwCnpFX9+eJCblN5UHH37OoYv3hqoPyIcirPxo9tRzBOyebwo\nv45xgJBLfoV2ZzjTy2OUQdH1kyDLhFsQOpE9zHn2RJVydG/uTaBhgYJE5EhZ\nsLEn7JQgPFI66BxuwhvPYCFSLcJlHmLwOKacNB7lFhHFqerJjzWFjaBb3eb/\n0v6M\r\n=QLc4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+nTqwyyl6nXrL6/2KOFbkJbSup5AIIBaTikSj8Xbh9QIgc2OiCHr97JsCUQ0CELgc6kIbcoFBvc9VCHOUj2xSw20="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.2e269285.0_1591752925095_0.6452838173980062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.be138b01.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-doKA6g8sLaLC4561waA/V3ET+ck7Y52wwB0o9u3LygVb0oCnD9gZ/2iBjLTJym/T00C0xedeXn0RhTAA4bsTAA==","shasum":"47c06f0032eee29b30679ae956a800d2af1040d0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.be138b01.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UcxCRA9TVsSAnZWagAAGt8P/0hqcOj86HiYTfZ6tjUw\nwAXfOzUWoe1zHx6pSVJ6FcVT24cdOgBdoVso02SAkvrZf1awW71jNcThTBYG\nmUltMdzkTmUcKzI8NZuAOl5rfaCvHYHJS/XcSl+HAxKO7uVuchXxot4dBOdH\n3zsGS6pOT8+zGdl7dw9E/0cTzhRe7cMxWt7Qs+YjEhbXhc7v0RXQXQ7uX5tc\n1qRKvDpykRdJ/mONr2zbrCmdbqol5okaCE1J9xvhNcPLDAokf5PJXX8vzr99\njXyoGcSy9T/R6Ujxlkq2wOrsQ1iPYkIYfPv3L3HdTMAg7MCG1GRNQYo+vaHp\nOyRrKtZQTgHPiycdj2V8pvZSHu5+jyedqUjELc9ANJlMwgSgUz5V01p9QuOX\nOD//38xZpAF0c7qX28/HfF6ijj8UFyMtQprmigfe0QHSjQig/UJqi1Z2yVZK\nTmfWed/QN52J29akCukcsQ0dwayL04BWjyVOkT9PiQZlBfNEKRlJKH8jIyRx\n5uubTLthJWBgV+QI6iVzxRQO5C890+b7m9MbZvJBChHmUaN3SrrCv4T9ZkTS\nZ46gqmxAz3vtaZrvdJR4T7g148xOJUIAeAYDJ4SdCxaXM0QzjKMwpkqruHgw\n6WmhiI43fg7seFAOSmdZYf09pIQ/D7s/ed7tcaUn7PzcwWYYS21ALSV/8ZqM\nVXpL\r\n=k7xl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBmXKkWXtduOFg/bcyXPyobDoVjkXwS1jCIHC6eoWkQAiEA0eFdGgmAiIXnec2oCX7UXzCNOQmfFboIVoza2bX+DrU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.be138b01.0_1591822128798_0.04826276212916358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.04bccf5a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pXVEVbQ5u8Tzi13w0cxUy5wUE4TCOgvBPhfp3ZSLEL7fdjGNYBdQPsIlX9imDHOM++zftFZKSIICbhpDWQR/mg==","shasum":"d6b8ed50e3fe020ae63488aed47aba1b19190edf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.04bccf5a.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BkMCRA9TVsSAnZWagAA39QP/1U1IUOEL+pnFmKG/6Y/\n7dwMYF/fkzF2Bo8G97Ixx9Uky3djZxWmk7azerqsHGyLm5S8GgLfK/wRrsqL\nxK5KEPsSAgkNOPLE0SNc/ExtvNUnGiqqmFCsfprNlvnXL/mwJaYtKinPr7o2\nTk8JiNi3irKjCfx3NVpCW46uZLAzXimSFbNYWeSFUQHpxgEj539r0eQSQU8O\n8liiOLscjh4cqenlGuiW2P9mlA6hcJIe2K2ysEEtrh5K+dp4SAdZwb763jeQ\nwTYvZNGy+X+MoIvN+7QKyjPdMju5P/u0jqPJiTBjITavGJhPJGRVhzlly8AC\nBJ89DZ5ABzJqvV6bMjSC1aOf5lDuxI4T3s/MFga6tqh1VgYhGoaa22VqSKvb\njj6qkax8y/DnVpROCctM0HDt/D13KfIeLkKLfcDjh6jGVphu1JarJLrb/Giu\nshJ2Rq/ugacavUqEmO7h6l5M52xT78DaMhwwXoMdI64QFASUGMy1W1AJ4Uvg\n3ycg5AAgjBU8QBBW43iqZ+somqqFHzhNB4FRh0LCxKfta5D1Myj5dP6yqNhT\n4D2XVXAb6Aj268Ls8Wv3MhCGp3Nyr20FSUIk3n9gWpe2B1wGLGMOBlJM2pgF\noPZUKIkWhSGOkr4vXaqzDQ2K40crcW84BBczZpb8VPOWYwoDnY+R4nZoFWN4\nMlLF\r\n=fpbq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtXs8WBhXwwpTNAaNci4zdRY1+dLTkZeEQk5Vh8t6xJgIhALfnZAOyOsm0VOaXry1HmHZ1YHgN59jod9Ro78fdhj8w"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.04bccf5a.0_1592269067884_0.6780134602065924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.b44dea36.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HJjBaHXmEw8nxLyiCWlRwYdC++9YBQQRcIiZbthv+AJ5DykOo87nSjFzX/srh3HkXuZMElzbONLyA+JNNhE+0w==","shasum":"b8fb538ea381971860a8a6c78c4e1bb2d1d0a9b1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.b44dea36.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TI2CRA9TVsSAnZWagAA9S4P/2hPxr5QT9ap+hJiiL/W\nYxf4WpMryS+hbKRY06nXrbWqC1xdoesvtYDPgPC2PcFndnhKTM/LhJfvKBVl\ne68qiJaLwuAcf/iJix07OKp2QUVPDp1FQvMEeV3eUo777KfY+vwWzTYb8SCd\ncDhjGvQnJI9bKUux2AtMGHMuG3a4vgOZ7z9KN3/yGqbT2xa247nPDaQVR5Yd\nGwkd/86QtgGVWNXHrbWEfRaLqoaaOIKpH2X0eI8TiIHgKusbkenxad9fQHF2\nudiEQVJekMpNPQ2XpR/OKigWHoiVs2m8oEFJUEevKh0KRKHzPDBO+NiY+uaU\nMWBYvhxeIcW73RjO8DAJtpjixOGFyAsw7V1NFLLve4MDR5HsdKgWOw6s5t1p\nI4a21pBXG8PST6DryETxUVHy1kMN3ePhmJOmmjm5nbI8mHhJvsyAmix3PJvW\nxrEqDQGVcy2hXq9A50+d5Acaz8UNr2ATjXFNluN5IXcOw1PUDPv434O5tkL4\npKoCBzwy3VVQshZyEymEqppiqpoHiiBDTPTU+GhyymJWsXegrqzlNNEejFWc\ntbCot6K9ycZWp65i8a9yontaQ9ijWFAEctdzKXuao/MRW+9ioHVgJG4aICo5\nv+4woUR2DgVQW5lbXccAjn4pY6kS8GFbzBIYYQAb11DSVTScLt6JfPTkxZ6c\nyRuk\r\n=+Krv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLKr7PNuAIYnzPgBylvFw+yco9lMAnJdcoc+xuK9PDDAiBas/4/kUsEouqxKz5d3wR49qPvzO8APzsZrAaI/fF1Rw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.b44dea36.0_1592341046014_0.17285942989633774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.e2577e87.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CvxWNAPBsbEoFV2N7a4+FV7x6XOeL8OIeAbMzGgZJOFMw7saYd/ft5siq7DHTCmB6N3UoZuo+D4wwcEDaAj1OQ==","shasum":"9c7dc36924d3afaa17c784d7ade9400e64b8fea9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.e2577e87.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTHCRA9TVsSAnZWagAAaiIP/ioGgrlLGHeZQ5Ds6WeJ\nnzgrLOHNiu8v8BrgKiH+GEbPRzPlrrj5uR3C1rxt3Di2sQd2PGvOYR1GmMol\nWmUIe4WGVrNR+b8OWuBMSwjNVSBPnq8/gmiYkNi/YhB6BxL0mU48/lBfMYji\n+5yi/SKaPCrUgWxOXPtK62NpEUmzU/Gma7lOr1epC4BL6OlFAHkIB/ksgGhH\ns/OIhdDC4j7XaqeuFcqw59/vgYTeU4c3KskHH0ptBuF2vY1xUu5zdUIZP2Rb\naPyB70G225sFaQ25VerBxhvf3yNF+k7+Dkx6FErVKvA8pH9AjKVwY4xtGd4n\nIiYxZpkW6z8/S6KRptKX1e/ppRzn+Xv4WrXeS6wox01HvZ0HdZ0x22BcVSyu\n5hmMO6mUhtWM83vEnE3sQs7EGj/zRD2Iw9bbp7jBHttgLBsdlXu4IueLaQmJ\neDt2ZGW05Jtr1WNV/FGk6WqEOiK45dsYVqVUNvZC3GDguZP2V7vkXPquIMcs\nwuGMwDYGC0xsQQYKt5FvP6my0c2FwhagFCIsNwBvWnX+3Oeg/zz1DaiV7Z5R\nt8AQYOOVCAtglBKEImjf9UYOc2NwHuTEa2AC3FSsDzvJdq7fDxgtYjKRxAKn\n8oF3VyIBTdAGKSyp1UfZlN6JUVYkmgFZI3RP2e0zw/yn9aMnWeyoPs4cSU2V\n9JY8\r\n=+e/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuBZn6z7jG3VxPmsIeC3X7RvUs6X9TN+86lWreN8djKAiAKVQncUIbDXSsygqtPMXOtb57X2XywcjZfU6IMx0K1pQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.e2577e87.0_1592341702794_0.704918741013294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.58b73343.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/ripple":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EDl1Yn2QyBS0wc9cDau2R5BPCOcMZ8r12bOpixljt65LUgnx0QanW9QMbbZXyYETM8OnODbCzWFiQDObDLi2Yg==","shasum":"ecb1754f4967cdd2cab18606c6640d3b0bae1e1a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.58b73343.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThOCRA9TVsSAnZWagAAweoP/R9OMrVlOjW4zK5kpM6t\n4wpBWy3pSds//eZ1snciTYGVSozabzD5u/gJ8Ufxh+HLkrKaqedYVSad+WIx\nvFHWmF7ooxRUWH4N/iVzpbekvGThEXGaMu/nXkyTvEarm171VetH40l5gK3q\n8JhkgYMxZ+L12uP6gAsyRFKRiakZJ5oN4MocYM+7tlCmfHkLjDS0OEC9bDw2\nmKrhmwxSXR1+508JsdAhdw3HqUzgfyNL/1njs/wLcDW319vRtV0n4/0a3ne3\nqClHxNyIIK+2bz6//8x5IEzNeNT+ZwuXy229VyV5eoe0EUww5si/PPkHz28E\nHanb8GQPwoyNTtlbeLTl8dzYDwPTlahyUqSywtq/cPy9i55qJL6YHoskPtVY\n9x5unpNSLPrDU5/qeR/7GyO+aalaRLAT7XW/mj1gj13Z0wUsPnR+zG/aI0le\nF4R3ZUY1Mn6iWIE77TQkMD/YgxPuLXHm4VoJDtRzsv6pNU49iKZKw8LDrjb4\nbwZyPnMsS7zGKslyXh6LUaV9jG6Sv4QOwOnFdODLzN4c1BDxuf128iyMnbLa\ng5T2ljGry7DVDIICZFn+g1R2LV3eKBhpe7ZZjd//gwp9Xy606I61U6V0ZyRZ\nR1qwJj1su773baSwTmf7iAG4bwCAEXoVY3FqNhYFH68Fy3q7edlF5FFJhbMc\nKMCP\r\n=YUo1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClPGtFExTu+lylrhphj2CWEXhSFY9HkWfGzfBE7VVVeQIhAIUGBe67CzXkt29Iy3Ibqu5PmspgTasJWPOWLtLs64CD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.58b73343.0_1592342606367_0.7700431957496279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.f155c058.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-d+F9GU1PsakjwaOZzcfsrJM1eOeV+m3zkNQApVNlbgoC/fKAWLrH9LMI3FUUsENs8HJN0jCxDO2SSfTAbr3c5w==","shasum":"0820c3646da1ad909bda0227667e30e464b6051b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.f155c058.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661oCRA9TVsSAnZWagAA+GIP/1PwxZwmBbynldUzkuon\nxqlyOz9zNNOpohL0QR1eJjmmyrogvmdvRqxKG6YvRf+InvrvEa68wDVAqzCs\nSyV3X4U9vIBK88XoHEu2BKNPSfZbNOdsd098B/aLSxZN9OswlOGLOURpPFFZ\nixtWcIa20TFjk4XMOCNqJIEh5e2sQVUqkMAmYzYjYbDsgJgYWnNHjjijveV4\n0mI/6SansO8sn/BeB21zC1QXo6VTaGtVxzh4ow9bVmmtz+YtTIB97fNkWlel\nZvQcmFb0lNStQxpYkMUe6Vd1CS+gqUToEmkTUipwFnm1xE2gduVN+1MCA7nt\njujjDZSntAluXnmkdnRpqMxGe6/YdmvwOs7BStUagmQWBRiB/rhqenAJ3RGx\nZJxAESbgfAQ1M2mXSSTvwHu7S5pYYZSb0P9zvZ2R5LJeDArjXh5NFcRA3Veb\nG6bX7QW7vM558y+/Dyn7U0cjan2Pl5Z+AJXstYBXMRcjZn1SoCSBNhjyqic7\nWk4yXSWc7xzgmH2Ey74FYOYT5UgOvKAzXtGsZf4gA+tDfk0E130bzk0rwt6S\n8Sd65Maic6UZVJOQ9SbC2aEWvKNJ9lovPy1BxQ2fNSuPgkGceAFKfTaTbUqi\nLWygWzeRJQBEr/XXX3+tR+/d8UUqfd5ySYomWYNtCU2MvtC7dsOdDZ+tJ3hQ\nS2oF\r\n=gEXh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpWK2bc7gzN0ztPiGfR9G2M6I/el1Ys6BK5fJ/dv4C5AiEAzbkOghiMVw0pqIPXX+uNqyWuI98EOUmB5keJuS0gCTo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.f155c058.0_1592503656297_0.8797784100535875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.309779d2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MXp04Z2aGRg2KwozKLO36p6ITK7thMClaM+H3sC9u+nhTIeroBX8c9bvpTcVXpz4btucne0+Fl/GCUuB66/nog==","shasum":"ea737953f31cbe31ad8ca860c337e4a82d134343","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.309779d2.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+aCRA9TVsSAnZWagAAVJUP/2OSCLU+DxxSxmNlQ4Rb\n5TEa6/VbtoP5Hfb3Y9EJwCidUcofU8UI9eddkuRtX18wU8APaPQmYMGbSotk\nE7gX/g918a1yPjdV4LuviWltBNMcOeUPUFh/5CKhKlRMDYdsj/SqRv2dhq5R\nfKt18AsuSGLYSuTsKZtF1ubMfseb4+LjlMf5UJms6KO4OCEgtq4AbwEJDiUm\nBP1It3bagSDA4eBQensE08zKEl4A6a+kph1ua7+pVOQewm2eLwuRgKYDIneF\noD+vdYObx3vuxCfcd26WqRzmqi6IOgcq3QeNUUEVveaWJthcTdf5IG6PvnIc\nNAZcMcgXPsF5u+nf+8HJnV+HOyrnjtBjHdNTFQDaetGQnYrZWCPt9PziH32m\nrKG5ypLVzF0TatjJr/0LnEFTJ5i2nrxh6Cv7okuGeMDzipn9qmWgNNfdABU9\nRQKXlQrzoxTKFGJXe1N/tn/EP5U07SKzr7P8H0HlNYvEAROvoH7jTsQ/W/GV\nhWkmDGUrWKZArhBWTJiTOOuRUunvALOH4LcgnlbZ1ThqpmweG6+P53bATYQ1\nYYIYPT2e6bSkit/g0lWoAKilyeLqAoAQ+6d21rL1Rc//aDs6sCH/Ftw9MuFr\nddLicLMX9Fa+0igQlubWae6vd4rJZXTuJLyVVZzMFzYJuGEs/KoCbJeG975t\nbMCv\r\n=Nplx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhFHvLBSEkVATA6jyPUAnEGwvp6QXDxFEit+tvQkhfZgIhAKW70PpczlDXcszpNGL+a8zQxKfFLFWm0RZhc5ThKnrW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.309779d2.0_1592524697945_0.4457832101571908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.e7649968.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-z/ec0pbd4jXgzJ+7aBX5wLyTPNWZRJjjtMKjN18I6/Xq3DIQsSt+87K8Gq0SIDwP61trHihI0e8EJssuOmVU5Q==","shasum":"ff6a65277268e9dd5ba084ee9b1d33fba3f6e057","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.e7649968.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDOCRA9TVsSAnZWagAAsHgQAJOxBK31TPq11s+jO+7I\n7Z7uoL3SkImso2adR78b+VYRhq9cN8HOM7sNstAXQ0FiVfCgLZH0Talvga8h\nbgUPW3lOLfrDG/eWFUEfpR9Z/Z8DNUEKVVKQIxtBFzOyHXNCownljwZKoWTm\nupwMrsRHgrk6vy6uGsdhEOb7qU54EgVoKXwP3YsJyQMT+9ezO6quv3z4LypU\n3H2qezwVgA0SSNZlAvQLO//bQ85uiIryuffJv59nluyuuMx3ukTV1FGZLZo0\n3dSBHcGPMta/SOodnWTQRUAE4D1QNH2sCt7YqjEPVjC1Utv9Df9WSQlxcbSF\nCENNjOIKJhZW6eukK8bShTFYhBwfb+SUVKNzDFEO74O+QAhGl9hROkzgCxBT\nRRLy23zD1OW+KpnwLXklyUC+e0OBwSBZ9cSAOK4FJAJ4LSv57wgB98/ncBK5\nb5qH7udr1AlNGx2UnhrfZV3LobpcZGrLYEApc7RXQFuh/OcvUnaXSA4D/4TD\nOc+k/DNLhguIhF7sk9u/Zu2+hH0/bOsK3sok308XnrdlJWIeqR+MgixqXn0w\n6fSP/g8/hoPBBEpdEtyefoxU9DHbBVJDsLlvaGQslKldEvWDJ3Xeo7qv+SQT\nTPTohsyzYpeiG7uLsWHenAnF3vjyqR2kG1IcpRkxdQVLXPlZAD0V0TRGc70o\nEUau\r\n=NUBs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXWqDif5Q7KC02iDqjNcqqlomwHk2UWuc4XesIrF8gqAiEAgoX0dGuXWKW38fhobRR8lZROB+50U4xMDtfC0/Ah9ko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.e7649968.0_1592602829531_0.9416764935747857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.8e21c78b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Empm8yCfQ1SkxH9txvamZFM/H+kvGgm13tMhJD/hJ0g539TOtFw+lKQUasNYgVu4XztuNnrfb1wQTehmgJQYew==","shasum":"9f25fe0cf1d47076650dc7b93118cbaaa0372330","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.8e21c78b.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InnCRA9TVsSAnZWagAAxYgP/A0KPeSW1UBAz90owaR4\nKeo1huuM4g8iG/nH0O3kryBDuSwTpijCRbvNmyaEghPmOIQtN6U+fZ/ROjaM\nOuFoaDsTAwpwQrJZ5P645qxx4f74sHyBE+31qohD2BsgNjeVFZyWOgXjxQPg\nAWTOQ/MrMEKGpcec+XA/SpCNTADiOUjQco1Eo9NhFu/CP5qDxkC03VGhqK76\nHHTsJXPqhsyhq030oKxc/MGbLoX1eKKhEHRlVAiZBmiBzrS7QKXQ0OGCOMG/\nd6G3Vm28156/v0l8wnjNG6FbbJluc2sGhF6qasiZBy/aNMeCFBhwpZWxSEsl\nugGaTCubxzrJHJHyNbx8oTLwdrW0+am3P8UHocchnQa50Jd0pvWxg1mCrWUv\nyXRG2NAxAg53T/YMIogV2Vf5dSMssqalDhU7m7PZcNRl0ADltlCmRaUL/Rmv\n8GX41BFPp9sOl3WI4epTODQ+Ygpr7J3fVkVa2/MgNyZTo6MXg7wnjTDQvJvY\nCMqhfYviLH6PgWbAwd7uM5mj7AI1lbhv49S9kzNYEjCy4HLRSugHZ/PRZpq3\nCT9WS6Ip0MKpLs1lzPIE8Sv+lqSNi68fAU7GIoNijQu+6D0Ci3htxckLnlzu\nMiS5QxzaX8qCpoWyoqfrQt6HffcnPY4y8ng/kavry515dI+VHY2YJCaaN3NX\ny27V\r\n=QYE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6JzhMfH3Fcwi67rDAgIiLrPqIQEsa5pE53ihywx5xlQIhAJXIsXend5fXgbcmePueb1UyfeAq7ydYkv8QeuSzrNdH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.8e21c78b.0_1592822247405_0.08007301628700025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.6db76faf.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Z2iyRLES6J8cDnYP8kgDJpeSJ+bfLjM8IR9KylTVaNm8g+7Tp1CwpuHmY3tQJdxVYWpfH3ZIiq3qNSSkVRFjgQ==","shasum":"2ce00ee240febe40b18394b639c80a4d2a5941ce","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.6db76faf.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R67CRA9TVsSAnZWagAA2SIQAIYWjT/6kTa9o7m9Jr9a\n1bUicvnDAks8EbP+ftwFc8B/yxZwtCaPQi6NdOmTYmCYoumUpsFyuZMJdBGl\nJYMJvp7PXeaXcQtRHgO0wvmygJ/SDf1nryMUE5wENLY+H4c+EwGTnKkQaypn\namWP0thO/t1UT7BHaoYIg0T+d/bWoBwJIsLDeg3bB3W8VqeWEHgKA+5ip4GT\niFn5bluj48TbR++rdBOXUJ0s4DQwoqRSvsaOcfl/ZaKuU0KyWd66IWvj8Ylr\ndESXReG9CH2i7nJQBS2E9cO/N3SGVMkUjtr4QBF4G1Zd3V4NMiKvaixKd2ol\nPOHj3UK+NZ6512jgA1MFo4KyNbE7tGRk8DyB8jleuH2tLnBk37QBp871VYia\nLROQKVinYW/NB/I5ugP6AbGA0lokcNCF0MAKpH7sepB/RuHsQsEB1jtFvoAB\npuuydMKCeWcAaoyYRyY9U/nrPCH6TkKMs3y7k+yAYQqeN+adfOMC14XBaQ9d\nfQPvLHT36NawmeQeOWDaAec/IvtF2qxfy9DcGpB1qg0GY3vTW8SkgQCfjHqC\nQPm+D/T3yXy+/VRFoSRmecFMMGC2Ppicu6v10+Ura0flC1KZkngs31RphySf\nHjBbITxAkkWZNcsMKuS32WI6C1ocpAvv/7HSTz7/Ubb98NJIXu3KJEycmCmz\nfs3D\r\n=Q3zN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFApBIjCt+FyCvoB22RcTehb2zAew0UJiXwPczvYcy/sAiBPhRYZ/1GRpVhNyaPJ8wxfKnmAHsge5QSOTYcrcicUUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.6db76faf.0_1592860347023_0.6057852588508699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.c4dd9684.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-22bjD/xjC16BMUKVFjJBvmHMhsooh5ZwEsqYkwSiwTJ61VXAP+63FXvlx3hLvSd2AOxS1lk4LkQaa+miqNPfGw==","shasum":"27e6bf49efb70eb0769193b46840ac1120dad00e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.c4dd9684.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxfCRA9TVsSAnZWagAABaUP/3PWTBUZvVAJzctgyHyZ\nm+SjOdvYS9At3OmLDiMBDgt2qLx1iHd7GNothnEVdU9HFKjHU46TOfYI1SE6\npY3T1koIML9QyCYiqU0jTrhWBPWFeXtIoLFddF3LrO0XhM1cxTgnqFhi0TEu\n3hGorWAmgWchsUDQG3pJ8tf/TQfHSRGhuwaPKxmcrhY3KRH2+hqa+jEFxwSz\nyKGQigmptkzlglibGsNel5wv7kdHHUdF6kIetqe12UYKIllJLnbokIfSDsmA\nUlXZckCeBM0oxuI3agjSRYMce7VC8DN+KMLOwE4eRuJDNPD524+OKzC7HKP5\n06hgBvVz2wa6ifbjd7pBQVoaJB3XktqSf5NGW13udvILjhHDuBtRAxMmacsv\njWc+Vg7WoBLUaGLmH9c/bnNeRoz8MUWWZ+cBa6IvgUBc1pyUkK1r9WFGqzjg\nwF+9QwwOzjjtcS2oSAKyhStWQ4iu4gbJ1yJKuz9PmH1mnqt4ddVvNI9SOF8S\nFR8yMTx1CVdVfVaFzolJfQUHPb0xGuouIE/pLYoFrIavC2JnX6yHwPV8qz9b\n+TnZ0qdkPs4kRF70LcgCgx/sMlmoD7k+6xlyyMj7A+YmbLwPxSUQbWgjnGkm\nVTnAfmTSKeg23why9RCJmDD4sAzu5/OWlQRD/x/uUKCIacfdE7uU9t0AB7m4\ndsVV\r\n=Iqdm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI2qlFCHZzQbaLitV89+fbW1hUxI0v6Reh7hhuWodoqgIgItFpQgbiTR1arBI7GGBCeqWVkXgDBpFyMORZpW2L7U4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.c4dd9684.0_1592925279553_0.8878739887344069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.b3e53981.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/ripple":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-yZxyUu6VCaf8auzum84kH7XyTQpd8HnBH2n+CqkFrzqbeKrQbseZvNs64YiX0B5MVa0LDQwwvm9uj6SMIBw+6Q==","shasum":"58a26244c39170143a4bb23317cfc91a83b3ee07","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.b3e53981.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCbCRA9TVsSAnZWagAAFCsQAKClcg4XE11C9NY8q97D\nuDpSDSc/+jcuEsLZIB1DwabAh33XjkiVweaKas+mg5ccO1BeF/PXtadO92sS\nJGiZSxCY4gG0EbhxlIBcGfZBEk5ATNsKX2MJQdRY7gFKK7Im1gvMvHGJmhXg\nqW6EAnjfY2N2Mx+t0KA6zZty3VSO+moEWb0chb2M2+w6BpBwThhZyv64yOi+\nMTEHKFVqPYq3DfWPpqxuuS85AjhHQfoqRBZlLh7vyJGLqYda7BtVv9dGYjM1\nwtJWOUxXa8TBCj7P0frCtdnU5lJPAkh3fHsdPqbUy9Gf50EzoqKcVOdcWKxB\nekBtHblZRBwj2IZdUMSggrJmxfEakhBBcVg479rNaA6GeJMPjQ9LYQcl0Ktp\nGecgygswf8y+8zATZOkjgiaE41JPtkA3GVbciaSGYV4WaBq2+Q+e7RJxdc7d\n8A2HVejKMFTHuoA0ZW9JFXkICJE4Mwo6+XK/i8u7JaDvOKTBg8dvaEgWvShm\nC3vm5lwFtuoKEaVF9xgcviG1DHYJn9whZQR19AozxBrnzTs2JLEe4h0MlGQy\nMU/XRBka7C/cD6KjrvmrowduXKfqEhaDUo1GMlDQGuaBcSb2LB5ckIFw/dcO\ntpdD1Co3UxT9XgNN7zexe+DABpbe0tPuxF7KHhC9r/NkG0cfNOh7IqPCT50T\nfiuj\r\n=uXAR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYcKIkt+JtkuXnzbcS2d7HZKK9ffrzDfXVZ/ExMStivQIhAMTAeX4ZnJC18bby4LtR61pfUA5f6wzMPmes3R0hGiX5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.b3e53981.0_1592959131173_0.030928412710360842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.b9468f77.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/ripple":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-piiVK4DQgMyaMvYB78ZCednxvgaGdvULyJzlUUFY2neE3AjWRzCN83XgdHAk0yQrzKbt/Slpl0AajQX8Itz0NA==","shasum":"6df99c72e0d9cad33d7cc0815ada1b8023b7a01c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.b9468f77.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88t9CRA9TVsSAnZWagAA4S8P/RApAi6SsZe3BnGIs2GU\nryV45RL8urOZ90Un+zdpfzrhJt77B8X7HfBtc6ZEFDlyPo4SRCqlAGk2SbzT\nozzxRVkPDV4zYSJSfXR3GXM+X+Bsum5J4AC5nzdSZdL2GVyAXB4ct9y+kwwo\nxOT7rjp57m7me6trm6ykw8nd/q2CDTM5dETJ2D6i9KnlxHNlLfW50+f08Tx+\nicKbi0NWgMEtimZZ5ZnZ3UjazWIYLnUJcpOSyUiT37PwZxvGKCZ/d7qU2UGs\nic1wTZPK1ppXaRPx4G9N2YViU5IrjLD25a7fD1vfzOSL19tOwXaX9QUcikgI\nyT427CYt5SB4c0rUMmGIIYpPELteDshGxZK1YHeLZAwsdgdtACLlNhwVA2mK\nPH2mzO8dGdPtJGia1sMzuwiFnn+CPb0Sy6mj+k2oxZEbO4AIOnWI13MAo+iz\nbqKo4ehXNahwZTS3aGcKYNU3Ysh86Bua7+rv8w3px/V9wtUb5PP6FgwOJhOC\n0NCEjnw9KYdJpMhjnnC6hqaMVzuToSZ46Kd/uvo2sSwmtARi3QgVjZLXfuAC\n0fYoUEBxyG6qaKMbxM3rTe8m9P1wuo/8ZC/3QfEb6sTSIGGn7ybp7vDeTYZ1\nOhSoTiCf4zwW2j1AK1UYs4tLW4Bsh/tTagT4WfA9RZtYLbh7M7tsmlNaVBGL\nPVHR\r\n=GOak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbvgFyCRlUnJ8Kc8/SKBeqp2pO1poKwAT+ZipKVIEiPgIgSaNpb4XCIDL03ObNx6OBFfCBo5LVx6yvPw/SvocaqXA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.b9468f77.0_1593035645487_0.7850048489485406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.eb790e49.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/ripple":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vi5eeAubzucx0HINu51Mao5l6f2TM09E7MTW3UtenZxgOxNoN1Xz3M7M/+ypJcp+wwW8OyejcLAM6cNy4Gyo+A==","shasum":"0e064a553361d43d5a72205f48d85416427b81d4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.eb790e49.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RSuCRA9TVsSAnZWagAAgyoP/3NigWhhd2rwfqTM6put\n/5CUsaltSsH+sU9SbC6z46nn9M1QsHf0Kz0ovHH22UmBxmvnzMRvwbmMkvdF\nqYcQ0/wfVa7ezinoGDf9ziohO62hiq4NN9oATYkd9S7Jd3tVpv9SsH8NEvqM\nDR8zosV2MBKyNU4ybyfHPOJna+FGyaJB5YRiiVYaL/bG+mOQR9ssguTilc3J\niQFnuqDvgOM/JB4kmUR4wco/xTKu7mTSDTAWXajulqC5eOulQeCxsy4OU+Zy\nOeKnrPfsRQs2DDueFplsLyv83MWpYlV2fnFt+AYHFE3VUiO89A8mjX2crrv/\nDF3RUKApYly1lA7mWhH/SCL95ZR+rYvYhpsS6nKls7ALorCS09W2on0Dj5Y3\n/rTOQ20Y07NbFUULKiPfIFIgxaQP4Xcl7xNgT31/281jXHPRAB4Ji+314OyM\nJELe0GIOw5FDvttPNpWlN8wGwo1F+nQcW683bUVramVX/0ptxttQ+XM5tXMe\n8bZda7fG65n8hiT+heJCbgfQeITOyHZWqf8wr8fcgZJHm2Qrat9B72vbPP7t\n1QmaugRsvCiQY6d0mJOyqshV76hK2L0H2nzaHyo4/GDzS3asIrSJMqrzcQ/w\n3yXlsEHT8+ZeYWgLGwaoFHqWJg3jM3N/WB4A5Cecdkn1XdI+Gvdqr1+lxyca\nzre1\r\n=gd0Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtPeL441vDevFFmXGi1P0I43kRYqjCG1UbCRUlj4boEAiAaPQX/KIiOJpzZg8CcmiIgLivE9t/llWTu/qH4R07Gtg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.eb790e49.0_1593119917986_0.5766373148021009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/ripple":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-S2r/jnRGgg/ON10GqkKGvigorZ9iC9aG6wce4PqAkcWfVHcmVuhZwBe3kOBzeiJO7iBbv1jtmvak8a2ekmK/Jg==","shasum":"79c3031edf1fd3dd68fdc9df418481ad27db7981","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iq4CRA9TVsSAnZWagAAh3IP/Rg3pUvejDLFSUan0vVH\nH8T7RelNs7UYux3gvgLO+fJNcY9vnJ7dniYQ5X2Hi2LqKSPW8MtPDrimjCE0\n3K0q7+ne4jeOqbz8nIWVB2dzaYc++hwgs919hw3rJWmhsBYw+VRP3WoNDqOJ\ni/QlYH1Hj6Gxw4vT+Kuh4/5RtmpI11I+symbdUhajZAop6CrMcfmVa/Sjkzu\nQzjW6ncYELRY7s2fMrtvwXCD1iVj3C8WLDBPOJK6DbVsXhsQWKLPdXSkvvmj\nR1LVQDR/CjyxSXbLEH5bHwR0KUxgqVZgXcEcDEt47SHQZc82p+4y8rVRXKra\nbIbG0y0Q0EmdRo5M6MZScqNZO+3tzsiBTtwm75p60EvFIVXt4Edc0bGEO80h\nPy+UBfInevBWGcI9ceRlQpAU0B4V3uKP11zlxIu9kDRJsybeZ1DUGaTcex29\n58UgDtwTrt1HPUcCGe+6nInuFlJOKwsL6AAOzVnlDa17EKmwdwYyCoMtsuwB\nNxsbIhJbWM8uAmqplySDEH/VVnzRZ94syvwOiAOwar+K9OBo8Sbz6ModstTv\naU2mlXAcqwkicH8UoyeK2/5tNHf871d8oQh5nWFyw0bSlVZo2UQAC4KwSkwJ\ngF8mA6FcNQv3XP/2MFwb5jUi1qbucE9t3u58tcbW/Xu4WFIT+s0eImZZIYMc\nkSHo\r\n=lb4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIU4r0ill68edYV0G6Y472A386Xf1wBtmgrEnQRDE+6AiEAyIko5LOqmskvizFsV/InPQU7ZlrzWD8tsNL8v6VH2Dw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.9aa1a5c5.0_1593191096146_0.5296521325513601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.d36e9861.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/ripple":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2DeDWd5NVV3RoheAdI3l7IR7sRtEdB2Paqyk7PMH3aAEofVWyod2EjeKjnpr4SRpiEr9ioumfozGaGCTJZXA9g==","shasum":"2081bfb8d5dd716a18ac5d682a9a97b9ba19bb26","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.d36e9861.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIFCRA9TVsSAnZWagAAKPsP/0G8kKsUfVnF1bbLsMsd\n4vMx11jM1mNajLrQmjLfQMAqpkgciFXZ4Gpn61z59CkTGeCZ0i8t/+ogDkda\n3MswJDw8Nod640EOGLZgxB8ypEen1Upp09KClZez2NS4CV6U+4dK6DKpBfB9\nSwIBUxWSumemr3dReNkltmzEv5fcB1iXDtFwBe80APWFDJTeHCB/ckOCAkFQ\nffnXHa+r2qf/k7YBIpJOcdZXCcqA1+f/bpfXZc0h6rCqzS19KCUeVvDcaKGf\nAUqsmThnHdsPPg8rzeNREIoSihB0S4zgz2Mo409wcEmcOBhCLoOTC8OgWTOs\n5jDK0WKqmylqv6rjU8n1aGZwbm7ggHwnCNUuzpUQr5+76yUeupcUk2gi66fl\niVyMS6k/BGIuJlf8f6BVbur64rQZ4hLvYDMBKfTLcDdJPfZTxrdQZtWYc2Rv\nGOXmYUCPP3TTqHq3HFMKUi4qqD1V8siXTH2aXTozg0exToSoOrTDAEEIFUIb\nMvp9Yd304fZapKwb1+Lem+29NeWocCCT42JYdHWoCaoi3FLlTF15nGsaKnK4\nykyPKbNtd7EXiOy5/sEZeLcvbcD4lLRK/HukEnecDnP97hUYmy3d6QQzTKOu\n4XEz46wBAW3J5lsEB/UdYiV3SNRbSuVkI7H2/euAv0Al+uY2w0mrLamlmSYV\nao0+\r\n=kkHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsdQzdS/gIWQ+XDMz/Z7PF5J0mf4HcK7SE3vII6yw2lAiEAkLX44NVQUWvWDMgeZj7nz9Huafai4v0H75SRfabk3SY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.d36e9861.0_1593192965141_0.8723710078463787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.155c2f85.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HS3SVPc1an7BOHTIHG7vEzOkORhmvmZqMJIViQdk+DriHAAB2oixfa8fW/MUQfh3C8ND+jKdfNG5NJCeLvznLQ==","shasum":"21da9872a16e8234b72450e12eaf7b69c56a827a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.155c2f85.0.tgz","fileCount":29,"unpackedSize":109908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oS7CRA9TVsSAnZWagAAh1AP/isWSyekaf//5T79+cnD\nIx7FP+WWx9FJodoq9s/kjvMGDLr1++lrkIhr/RVyIjW8zS8MUoGyH+UclYu/\nL31fAaMUid91bPIn0o8sqPVZxe6HKcp9bnT5cG5aEFUvVPtyLJtoWzmaT9wB\npW5mBGk20bEt2NuVkqxnxx8XURjIrDfiChJqRgDBvYuGqPl3vclgJBbU8agh\nkb93DSAg8mdYf4VB+cRFGOk4hvspYgPaOrcvMKTBxErY1qFNlIb16EgJKS72\nJQEpJdZb32RjVWAMUnxJfcGehbC93mR5E+Y+AQIOD5JJP8cWfx/RjVXhg5aT\nBAYwlGFeUsmrNVZRwY18m4b53fW725AFSKQjaBO9OtLylhh1DbmiTUYtMums\nifRq7nvwYZPNy5VOWgUdM99X1JFRoH2QNa+50+QTBEtpZ4JjU+CTU8lpHtOR\nxz2w9yPl7dRMpUV169gjcjrNy6KOJuCXCEx1VsCC6DebLJlRTdqCYDf81sLj\nInAy8ts/RxV8mxzzaPt3nsCyvTirBgcJTM9jlEb9AKvGD/Fw6XW9gi3Lx3ef\nklFfVKfAa64+pbaDiqLMJSzRfziSLwtxNJScjxyff5PEEWJyfMZCuWWy05/P\ny3lGHskV4A7VfxmiallTM8AMWPwxCD5KtJc2304Ric31XF7jN5XtANSaswll\n0YOx\r\n=nQG2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2kq4tQOHhC/BllB+WZY23Njiv7zkkI6BUg9LK5gCsKwIgeOwEYEpNT5+jF0Kd9TIRqYXLDx/tIQ9ZcD36ZhTikpQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.155c2f85.0_1593214131594_0.27654350803331296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.340c9c40.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tzVUkZlzmMpGdbGE9fp8rIN6wkTiCnhhIKnzJK0ctflSPRGZY6qODsyae5WGVGfO5FEfuZMhBUoIQGOjx1zlYw==","shasum":"0b1486b0bd042548469ad01bdf384d738d27ac39","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.340c9c40.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obXCRA9TVsSAnZWagAAhIAQAJKh8/d3JL+1da6fUfJJ\nNj05iWRc4T68WC6j+pJRHjQnkEYsFRcIplIk6wzjZ0xcuOt4ITZk84h+n4FP\n8XYb37icM+k64NJQDTuDRsXZtbBrUtMzs0lEk9DQxPaccjLKY7roZ5MhOu2H\nJwyeuqYMuWqyUvoM6ocRZ3kr5cMDHG+h2+0yviPkceUESBYHjhASf4SYykQu\nplbhIYniNPLxkC0zfJ8yvNOPreBEacdSCKNbWf6zQdLX/kLtqdLfMba+40Mj\nzEOZSb61Mks+t+zTpx1PIQ4pRU1ixiaMVxvn5kyxTPyUr884/sZCbcbLIzDM\nZasZrenEpEpehFOeaTIl2uQQYxXL3FJEmwewrM9e10l5OiEEnq638JJw0Wlu\nXaxyCgestIyTiFUsuMEX4JyPNFe2/kU8pNaUJFHyGNO0zY9w7eURAgK05ZcK\nwPBrtq7DMNggbYbqAbIme2V0sbz8VkFwfxac3abplEbUPKJHUkCBVtalmKHQ\n25QatLvKrSEf45gi1PCYAgl9MaZqGVNMmfrYSkYPhj2wB16iI5xVBPk2jhIs\nlSDCJ0A1nSOo+sDM8Ej42g5Ac/5avDgEThJLOM2XblK7t4deFfBYAWDmnRyS\nLeytdtWwkhJhU/iKiU3dvH4RD4oKbHQ/cp+VTbAh2w5QJIa7HgXHxtM84BUF\nZFsx\r\n=ARiC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9DvT+LtqEAKDKcV/EOKeSlv0YfVh39kUL9qNx6qbgowIhAP6kRToRLDxiovSNO+Ve/ahNDsX3Z90v3Ci3tP6O/HyU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.340c9c40.0_1593214678494_0.11555326621811712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-ripple","version":"0.16.0-canary.a3384d2d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VAUf5NP+tjPOj1d4BDomqc5xcJaqy979yeofMgZH1f+S+p/x17ep/b8ftLXMAfFYo6oRJHw5DOSKK8KANw56ig==","shasum":"26d342823630454ec5f47181fd4171b171ec0699","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.0-canary.a3384d2d.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fVCRA9TVsSAnZWagAA870P/R5qsKyp0kx6p8g3WIZv\n6yIZ2duU5EISwhedTZg0CUdgnwipdLJTFWJg/1YBvXGI07oa3aCe5OIVQBec\nTPjCiQhxvNsbbUccmS7an1T/W9Zsog1Wfg+a3i1dN5xP9B12fXcBYnZcBSvO\naJQp8MC/nYfHP70R71CYlVX5vUK/g47DlwL0cVApmmlH3AXA5QbWZhuR3mC4\n0fDx8aQb58il/ngVgn0TzZSlFv4kNtEDJlXxw+VY7KkJbjahn/fgHxI2RZFN\nAAcO2fymrCmjd9tyRvK5VUPg0DXkpNIfhEE+ABSDkeenbjtXQyweyrDkB2Es\nigF7zVJxPBE1mYAebsB4R5annvDmA8Dm4uMuPEeAH40vtzfldWeVRYrZxswC\nhFG5ul4/MJ613u9QH1FjengqbZRP2zNqoOgirt2yLuiFmrgPdGj/Ctu+I7Qy\nL9eEGAsF+QO95YLm1W/TugQen3JTzNh/9fXyEhNst6Vf/llIrfROaam+Ychw\ntmaqhWMV07A4Z6rsfJmKvYV+A004632jfl7xffiKhrWGWgc9m066SZjarM78\njN9YSIGGTVlascyqqTM6yPUcc9BatJChreXGBv1dco7HGZpPT+VjwepxX6LU\nK07AHs9o7AWKtKJnf51t2l41aEWGw3WJp+keKKUUVuZaIHMP9c7H9KQOmri4\nBGV/\r\n=7SQE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICq+e8st6SSRjIhdRYJ4pzue19tac1BbIMCo0Rn37FWYAiAXavhacMvDWJqqQunltN4UNqSyHW4vn8rT1JCsPSg9QQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.0-canary.a3384d2d.0_1593550804871_0.7836287850199808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-ripple","version":"0.17.0-canary.6d056c96.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UlZ1zc21g8eud2bFBHu89bvrOoxoRgyH4WvmVRsRBZCO0KF3fL4epgj8DIhQxfBDnyfnxTYIFzZxKVZCKsJ4fg==","shasum":"d2d1a1d89c2a6be785676d2e604520d134a681de","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.17.0-canary.6d056c96.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oMCRA9TVsSAnZWagAAnywP/AkL+QlTxrQqlSY+3+xK\n2zqlNKq8KIQXbp3otBHkfRxtwjN6yBiocHMoaFgCsXkhv+BPUBsWUthMx1zV\n7BdqvUAcKsF3aevuZYtHYQ9Ar12ghpl274M18YsLMxvj1I1FokUcQjw1VTgb\nIb2k1EOvSD4+KoZTvhdIMi9XrCH8lpDZ6pAFfTrQV4yPWMdp265NXTY2P5sJ\nNnn96V76TeS+a5RMSJTBmgYzpurq15KpzSRkMFqZScwWfk/46ELrG71WdZuB\n/jPnG9XU1Pke6Fs6mFVkLTzgILXgrO/leG8+q8VIu2jXEHC/C72K9xDluEd9\nSjrsADEJp8Phfaml5sBsBQz2sEZKy9VP39ENJyFl0vjGyKTMIGTm4xex70BT\nAHi75vSaVfeTtplO3rZTgS55wPn1VC9YWA5pkT8IC5Ue/v0Oy6WTN4sik8gh\nqbT7CbVR+axuRGpft7+OFcNqQWVVp6ey4UTZF5gLzbzQcUu5O/3Gc6k5l+bE\nfzWvtJStLMt9TdLg9OV+xhoZGsmksb1NmPSW55A5mOKZCz4302LwWrBCwPVT\nOEoF3uyqz7tuNF4rAzVOZBbQa4ZCH1kQu/D61iA0m7p+jDFW33KAz7Zo4xzp\n4Mt4VvSZCSPoylZpomFjLcJvb4vYLOWDIz1nLikjPhu4qZHAd1wAe8awDKfE\nYlrx\r\n=p+VI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2Y4RU43wV+LZxFWIWhd6yVVj/Pir+IojJ0ycsSuKRWgIhAM+ixy79M6BXp4qpP75XGH1YfGTAQ6OglLy3D+pG/C0i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.17.0-canary.6d056c96.0_1593551372492_0.07038010970133834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-ripple","version":"0.16.1","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","@material/ripple":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=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-ripple@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ASvqpnBdJj5avVR8A2arewgQqaXkcHgRlKln9ueMy+dWX7TsEPUHNgiF8+Nb7P9JhZ+M+q2Ftx5WN+Kx/PDRPw==","shasum":"134fac5bb3c0faa21709314458082f898b912acb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.16.1.tgz","fileCount":29,"unpackedSize":110702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tDCRA9TVsSAnZWagAAG0UQAI9XqE/fJr6LQgciczHS\no4oiF7+1tF6zgoU2toFTFtE2qlYdKdJNRKn0dPyhonZmLxWOHvQDcRoTWWbq\nHs+F25cqZKQZ4fETPVGETLkYJfjEAO4Zr33o64gkPSQNhBQal8sGACYNrcCM\nisv7gM9BVGcRLoAhMBx/DdvvSmYSltgWYvk9u5vVaUvjLBVaVJwChGQU8Mzy\nAWL8jPeDIKhEmgcAcGolAF5VAtY+dVoCR8tE/aWZ/bOFLwTIHQ1E4UgM9iJh\n1ZCkC5hOtyvf/xl4wfiA3iDQdVz0E3YM4x07PqWik2cmtb9Bx2+s91h2qPKV\nIvCQNXxxkGmEOcCtzXzTAzuZwGyarz2ImqaigmP6FS2iWQ25IKyJAxOwkFaY\noMI4x5hX/4E27+W7V1LCIAfJ2qeZmu5LhjYKD7WtjQJSGIByeEiImDDzhQ5w\nmjL2Mxo6J6LrxYMLvE2E2KbeQNY8AHnz+rg/okO6yEDFS0mmzet99TkUf8wh\nR6EW+ViXihdWp9HzBtzELvqv+vSUgXI33+fCz4oZizQYqFgK5tcY/07i9STJ\njus3nm9zmvxBMcd6AGIUSGcndfL1j8FmUdjiEYju+uDgu5ZrpfJkBCDPmbuQ\nZz2ryv9+FjlyT21Bm5qV49ZE20RZh6qN67C8HLltcURKEXopaR+OCxtUXciE\ndlkJ\r\n=UhaJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPnbi9RM5lCZX4eCwQkUdeb2/xQYOOHJ/GoQv0hj/rKgIhAID2AYGNw4C/syJ/EDweLDJbJZraU9Hl4QGCLw+qeR5f"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.16.1_1593551683109_0.030030374199094156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-ripple","version":"0.17.0-canary.f7e37607.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8T5Anf6lYlmx5nMitCxfuYk737Rf41t+DdiuR53xbZH443SmpsVnmLN360/uyyPGjBBR3pDwkuruxP8peexTMg==","shasum":"ed0818a5ed45eeed9955933fa29855d003913beb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.17.0-canary.f7e37607.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IbCRA9TVsSAnZWagAArF0P/1utsHdoRe450VMkAGEO\nNqLVdBKDm0hYWCcu6OSclSUpoUh3ODSl2nDGBP5v6XelAElwOoBaP1mNeomA\nKYxwxJRp7eGesChh2bWCoXATOt57rEEc/hOpWxEohyV3eVILgqAXaL81bsou\neu6FBLfuHTVApw19PAtEp8dvSSIHZMHfwF+iC3GLAfbddG1g7tLq4J/pLipr\neGjpQptpRJt6Zbpz9ypir/wiB8y36G6XgEPZ3+o1YxjWaFiQ8UNi4NlSw56n\n96L0yzXzd6/6CZxllrk63sjIqtyJ/LybSyXCObIJMPZgJ4IhpDDgQrvypwnL\nyymItWo774nA1vQ70wR7XOWUOqqOukkcxmPEEfl0VBjz2VsThMP/Ymae9b/O\nUpQOnkLU0Fqn2LpdcSE2BDWYm9mZBuXwu8k7MgR3kA+/c1fxyV2sB6pShWob\nTBRMqL3+hxbPzGAPppBTgXBu/X1XEYY74MF2jHbefjmoaUxKIEDrMHR7ChY4\nFtIZI62cyBou3zB9oN4Ra9Jw0vW58I1hNTOFHzE99Tt+OdP2icT0qaxRe+/+\nDbOKKod2Xuo9VBMMj9Fy8tFHetpoRwUKjnbSrmqE67GtcRgGaIPGOkP4RL+z\n2SwjcxpM7w4r3PQA9tTQnTLQOobsDyJ6ZWNK5ZKjBBLmlnPIIBNwn2T//r8+\nw6vr\r\n=0i0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaLhrrXSmYfNd1MHfIkvBzOFWuSu49ojKhwJDeFdiUoQIhAOVQWYsrTu+p6YGwykexbhD7K50mWOCokI8TIo79yjgD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.17.0-canary.f7e37607.0_1593553434394_0.9086442969582031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.0afbfef2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Nir7oEIS/rEW3NJoc2szrnA8e0o9jyDcqNSlO9e7Snz0tBrpnRXb05x/lPpr4LuNBfXCx7TLuVY7SZlPXTRdPQ==","shasum":"165705714813c2cc8cd2360a3543204411ddb4c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.0afbfef2.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OdvCRA9TVsSAnZWagAAPDgP/iWt8b4fkkQSFws706nD\nyeht6brhrKKuGcJXr7TzEPe2xd3kfTVC+BpJ6sVS86aYaIUGn0ksfW7g8gSx\nKMrruwbgDE9P18IigFYo7O7OpcO6N7c95zdtZHe4bhuwRwwIiDVLSa8lJZUK\n3gWFTDLh14p7xs+5/itpOUFbpIG3+77HmXHW7p81i6wH3H+IH/p4TapfMF2M\nd514GCAHjnIkN+zqkgpMj98Ty8RJQlqQloMHY5JlhaSt/uwQKKIZogU9WzEG\nuq/D1j0okT5Oi3V3cBYwZkGrcR0Hm+rbFmp8Wp5W8yZDAjCttSWwuYFic8PM\nbxrbouadY6scn9MF8sLT7//H/YCsaF+gx0gXUT9RiAx9HgADiGRpr/fLxpZW\n96a1S40oslsXhqkikYRUxVc/DKmfi3Z2gdZHNbWGkU+cxpL3RAgcJHEXg9XM\n9I/9OpUXDxB6fi6hsFcnf94SyBs1nlHhSlUIydTNkAe9aDXCNqsGOGOHCsdU\nQJZdzDWTcCS8clY07s2m2CHj0ctko//oBTsxF+98DHbkSZn/eV6Ud7fV76rj\niFeHBLvzsC5YiTO9TvTn/BG9hjLzPgKyQ2xA675288WZEdgXFlc/mOHPh5zm\nARtnPm+56WBggRUqJJ14yGfPiGcPujGYdtQ2Ps0eLJKPnza89NWDy5E7cUQq\nglYs\r\n=TA9j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELMrlrK/pNknkpXsIDiirzQGa+gf36FBF5JcETzi2H1AiArlDPExAYmluZhD91LweLOWpsOQxECO47bc51yiOrulQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.0afbfef2.0_1593632622727_0.8702767193291499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-ripple","version":"0.17.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=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-ripple@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-WNltih/lA4B/f8BFM9iD/W9eEhuukwoUuhRa353ErqNB0wjox0L5pduyLpqshJbrvZerq1VSHPkTGgoJXPTzOA==","shasum":"b920622482a2ed84b3e150cb7883f40ffc55925f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.17.0.tgz","fileCount":29,"unpackedSize":110702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeACRA9TVsSAnZWagAAwr0P/jjak4a4BksYL+xURcfn\nu5xRN8K353RUoxJflKzW6fhHn0pY0ieMYnCjSw+TKGzX7C+Bpquxc8MNNtj2\nEVl6q3GJ3JclJsEpF8WfVDgkyDAeC/+iyoGWlWBHrDNETsFUv8e9dakgNeO+\nmAsafzUgFS/oHCxsqcMOxLByVztjmdXk6/ic5d7s2VFFBu04+5g4hH/xR9xH\nc0PFNE8ttnD9BnVsgEtK8Vg6ErlZ52VauGvTNffs2gvQHsrIVPbCSc/9owE2\nDBATl5vclQJWAWJHKCJHGnksdcfV0sroXkOneEK4M6oHwyIkQwX4ToSxRkQa\nPz3AoCXfgvbGfy4ermXlBZTaNtjQGivX2KbMpRMeAO4T5sHRwgFVT3jSZEjc\n7SH0Xa71SXKV4g/YC9+S2zlB/1DbMKkmSTK3LtYvmhx/OiX+0X/ISfMEeYAF\nI3rnxmAU/RrEwXPvUmvRSKYTUV+B3SPXnrYFj6Jc4sG3wECCWRij2055DecD\nzZYp2PHh0apGBvtM+Q0dsTaHy74Ov77a+X8asgQ2c1C96uYzwIvRMTzm8cj+\nAefCiTUMqB80tQw7J3T/WpYVLfKDqFbhLMOxs5B624lXrJeFLnVsbhXXHiHU\n01p2dLB1f7P7c8Xaw6jhNXln+aq7iAWmyQq2BsTSeEOnSMWstJBH3GS4+Htc\nj2ZR\r\n=zbJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe87O8anT5oOvA26cY5BMrPZpGrFDgatt/5Hqy95nGFgIhAP2pxRsWbDzwSmFDlKiab+bw91Hlx2OhuImzt71iYt+x"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.17.0_1593632639943_0.01875142422662668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.fd970958.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZYkXcAvTrn17l4JsahOWtznJIa4WrmnmG0uHad6V3VrZ6UoDY3XZHiCZ25S97lV6bYhcpuAIk4X172MfVkQJqA==","shasum":"059e2b3330d78448927a7447c00758846e0526b2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.fd970958.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R02CRA9TVsSAnZWagAA4j8P/iUM23lv5UrksAmUqVl0\n6LsagBUVMIX2aK7LF0jNCKgEvYlfC6NwtcXkv9XXjKxlOX+WO+agYRUVxMd1\n/FzbLGiSxonbK7yY+py716DuQuXmwXJzuvFixQE6M21J6l0jB7H+lEHj/nLR\nwe3LsIU1DWSKAOhyVLhhzQTuwdJY4Q5340euhDH2MnTNb8Pekmvob8/sW8rQ\n4McdJaHUgfCgFcK9GRmCV5fteawKcgPWV7T6UQ7/Pq2a+QXMr1pAoePaPhWu\nTXCEno6f106tGghCvLYjiySMWxOK5vztZQTjvjfUX5SsYhqkYAxdQKie228G\nFzY0hZhw6tHAcTgNWPMTUpVpzg54Dz6I7WgUqNvooY6GR9z653rqiBHjKoYQ\nkM7xwQ3YXswglyoKEP43G/1aGfwvKkEqCidCq5/YnsXBft1xgcjJLaCnjWLZ\n+f9M3fstukiANCj+9IXMcgsVOq5XUayAMJa3n3EV0kz2tZnjjzAMXhE5oGE4\nOWhWn32iTrsTpIsNBf27N5rTiKfUjZNJlM0Xql7E28T2tCHVi08N86s7XcHK\nTCdMO3YQjXhZ19qW+C/9ZxpHRkqEkjxtwN9umX2RLcDk0VEUAJuzSMAGB1Ro\nBAX6Q4Pr2T2H9RLMb3VE5xfqNm+H5wepiTg9ULMjeC/sudSCEWlvLiWZrT6n\nxLKB\r\n=iedn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGn4UbeVB4Rp50cgoP9kcJnvu8OXU6jHkHcL+BUD75QWAiEAhWKgqfvw2aYkEQEk9HH7wrPS/f7jMGMqkmUEYxNY2Mw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.fd970958.0_1593646389760_0.7108113756391967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.fd44be19.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-n0U1bKZij/+omqPFcer0WsAXNaOAhM0UL7KxlONT5MjFZQ6gINvOj7K5IDFyFFJA4aqe4WVf4djrRB3lpkF7bQ==","shasum":"31751d6df717323037b0e0878cdb93d716d1a26e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.fd44be19.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUfCRA9TVsSAnZWagAA76oQAI2JPZzx5Ad3Wv2YNNFB\nhCCFn3nVzXZw0OxHyN4+Wya3bo71bxmMsfHKU9dGvCevuOjyu+IwcGe/+ydp\npQv0QxI4Xt2PfRIhoSD35Uck0raSCz1l09ckNPLrtcCMvvYwyIt3hPJTzR9Q\nbzJET/YzyJWEEjh3DLtUIIieX+Z7VqvTfnWjioU5mKzDv6iLgGu0rS5xjXmE\nnvfSuGEJyIoLdWwnhU+btWFQwz4Lmio31pNWtgJUYGTGp6lPF/seS9TyOEqX\n9v1d41biao/LUVyUnjJRjoqbYax3KNBAE8CZ9ReEOLWkHjICHkwLgzjc+xeu\ncDAFPPKS8pD+sYfbD20jU3QLEqtqXmPrcLR8K2c5GDXHE39biwBFzIp10uaz\nliU4QaGMB0kHeGtnA1SjqZKFYc/eqkEQl9xlma2bsnGWQOK7rWqC7mVDXbKZ\nEcbYjuUjbjUXa/ciuxqvXZWm0htEHJnQbXdMvwiQIJgqHNb5/JDGb1XflgMG\nIBoNAeGxN/CrWzGmYhKr60r7ZlvvPXGKSMJBdTKf2nf1KPnZYXJ41n590xbg\nXW4iTlVVWFTmFViG5szxgQaPIy6iStXvHU6h93jxI2ePvj6FUy1ngzon1OhA\nLXWkKuXQKQ7nmfsxa9M6Mv5CxA5LObzYWAoP4c7pdVBM1xngaAVQXM3TSP+m\nDuiy\r\n=De2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGEUzIW5j3mldeNtTskcIRkGtmGghnWYRQMGGWipQosgIgMz4dej1XenVk6ZmihJOqDc4mM8guM0XUfMUccRr53/M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.fd44be19.0_1593668894895_0.820969887629442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-ripple","version":"0.17.2","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/ripple":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=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-ripple@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-rdx/mR9vxPS6ZnM7oWP4E5FGRQ3pgo7n/hGUPcGMxFfXaxaHs1evoIQscp9a6HcXVrLPXemKD6msObwMDKetQA==","shasum":"327eb714d1e3445e7c80a2ae92a1e293919c69af","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.17.2.tgz","fileCount":29,"unpackedSize":110702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAATl4QAIsmMwbFBqK0iyYcw/Ho\nHyxxV5tTLF/Q/NUlYafmlAbX/RPrRrv4O1pvgzDq8mrW7/XUeYj9YPLm6N1m\nUP5heTv2IN9xcmujikK2xCwKdO1vYHyjoXjXWCqfOAlyICik5LcOHDfTBp7D\nwhSZV/Bhc1VDuPWU1oYU9K9z4GYSkPJzxbGKebqJgP9oZ8dHNrFH4diXN/6k\nzbnnx3gM7AujqJacJPA+QYv9Pz1ebcOAUBOc4CXNOXLAMadNEHs/nlWCcEMW\ny5l4fOlDJPK3WwWSg2vuP1h4dptNbGhJx1bcCmaPZKwsdc3au/hfpt84naxD\nF5TFkbLh2blHB45wR0Nl01Vq7VcT0qHtaz39oVThEanDA5la3guHsy+MBQG3\nKyypHcO4FR5gSXCYWmCaO3aOBZsrrHwqTJtbmxMRrGA90015VwfPcMOWS7+r\nFFG3dhiburFB+YElvn1TVze1ljVniSZ1LX+ra1ekM1vtsummghEnUwnamtR5\n2DDPaNGUxUNaNeEkHvkqrOjfepQZe4IFtW+Ptwk1k9lMU5r45+iQnaCMA/xi\nQFxYdRn0Y5h4GAAR7sXsYPedCkUg+sivMv2vJ/XUZNRInONKP/pg097G1hzi\nxuWv2HfEmdq69a4jMmB3kTl8Qz+g6Ozlo+AEuLY8mzpIFq3LH5assKRQIv7H\nE2dc\r\n=7gGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcubrAEmC7ZX8s060ZbKnZ7+TYWaROR9zoYSRH1sSYZAIgEFXdZ3PgavIWl0OCLJkHAPvS18lyn75pEF6f8NR8sb4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.17.2_1593669490036_0.9994947876295055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kbnPdl95p5cdPnksMUj+SjgpkDFzq3fvaDStFaXgTaGPFB4JppjFlq1UIjNlzdZgxE+tB5xLmnEHST0+vY/qHA==","shasum":"98b333aa518f124ece085a017b299923fe222392","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.ca6fc6de.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeqCRA9TVsSAnZWagAAQWkP/1plO7GTsQ5vQrwwAWLK\nMklhVoFGEaqZMHJiyCQxzB/lXT/gyHESfdb4M+nUxCnTVgmRuLNHu9mV98Um\nt6zLq1KWYeHQo/6DHmkvSw9uWslRRkiy+UHRHu4MB3GPhEGdRRFwj5MzWNIP\nW3KeXCRYRISWCnbaV2aJGasS1nUI00jy0SqUTcsuHZVFTWLo1GeWWNSjRdrz\njPWE2/VS3JQQi46qhvICGs88giiu5CygLdRhtyrTKKP6OijxXEniC8BQbBtD\nK8KnspcD8prWRo7AShIm/il2LxgtmE2KZgDOAvMRa65tW6Twv/7nDkrzcuIh\naxyQ01gvtQqksQq3SxtGRyZTv6J841fsYcS6QCQiXgxRspCbFC1BvCZh9iiz\nzUJIxejX/hr+/IINBWkRfky1dOr8G0VwqXXE4k22KxZ2I7ULcK7vt28+obP4\nJSbiw9A0Do9vjR4Bpnr/iKv9cHVjWYsUAaEoKSRVBKITvkZJ0xWqEjlx8I5W\noiZ4/a/SVTWRxPZDTZnCEB6xdy4Got91WkA2NkrtPVkTGTpuvY4SFZ5hDctB\nYnprk8PN6BsIs/Icw4ME5IQ5tXtJQ3Mss9xjfD+BgfDef8XeUwpz3zu2CHTT\nXzEfMMk47abPP1gfrtu+2VOpYUUVWD/3PicFJ3WvZMvOdHg4u/tsosbjpS/k\noONy\r\n=6jTG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9sKbcaDji6Rhay/Oi3dt5pFM1IFGTeAUPQBml5L/2MAiEA3wBNcqEGOrsIzKqtQr3IypNZ30RjDgk5khQdGBgUemY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.ca6fc6de.0_1593669545671_0.5067485109758416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UqAxnKXswpHMSOc1EbWt6nWRvqPFds1lY4HP/d6e2aAU/580dFlTGcNyFtRVtl8ApPiZNJQFF/iK5p1dAK4RqQ==","shasum":"b9cf4d9d19c1f8713747f9d9c0a7f362f156f2dc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.79f1ec2a.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGeCRA9TVsSAnZWagAA6iYP/28wcLESd4+RzU2py/wG\n4UDDpwmB/ehOrHrTK5mTumAgGJfJFeP6K3qJm8X4/jJKZO/jvJvjVKCeTWgB\n/H2zE7tJBidiH9IA+nq1a/IT+4lHrE3T4c7Twrbmqngs1mXGzxjLGixBLoAM\nna110H39CZr9GGbBCsIUETuWqmEVHY45k71m3rNO2jqoBkLa3ja2deWg6pjw\neXCUyV2hZi75mgH4r+mDsKn3xEPdTcIcIqAerteEuOTFO1hLlwnyZKH3vCno\nSP8Pw9D+yyE5rQgI61pavZJrER2jZ/sEC9gWcBc+umNQb9CpyMcExC5aiBc2\nQSiKVIh+b/jukz6ivSjjY2Ee09CNoBkypXMtZakLXYA2/kGCU5Q8J5GRHP5N\nEQIIF5AkKYC2AJTJYYH+00MzU8IXCfCDWbLAqks9BNjdoStzgjxX06LrRJEE\nWvKBHkjK2AmBJxac9asnaVK/NambVJLt2Z9C/hAyuJvKebidHcttYmXd7R3l\n1dmhb0Ddrf6nSRe92kLwvJ/Bqj+H21PSzVLperm/H2+tVS/oETk+DNo7aD1N\nmF/CvZqHR5SHtmcteC/HsEG+8S20uXhZS5uoRLXrvWeZen2pPwo/UtIGnY5D\nDm9qYWoqVp9LTUhyeytbZn0or44eNQDCLQdM30yo0UO/aqKKUJ3wBUX9E68k\nM6zG\r\n=MOY5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiOZ2b4y4SwNdBdLmtJJyg81Izs4cQHU8A9gYUCc/eugIhAKB1F/tRWZvQRRbUD/KWfY/so0FNETA0U8OuCs/PBpgZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.79f1ec2a.0_1594143133772_0.9247028150130254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+dl54Rg78gAa7cTw9abeDhE+/4oOqkYjCU4elQ1xcS94GS1v/t+kHo02bD9DVi4DCvZbxtXPS/ftJYZZ4S3GQQ==","shasum":"61907d0d5cba6cea5640e92d643574948e45481e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.a7bc45ae.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JvCRA9TVsSAnZWagAAiLEP/ikIdk61WR2qh70VhNLw\nhIGyx3vGh/D6wvGtJ1Vve7L79kIvxBeeIB58XmKGTJkvUapFhdoYt1jhIZM3\nUhTwV73ILt4FDnzLlHE1GKu4dt0CReQ6ySflKm9m3OFFr9wKBWpQo5oc5tjY\nf3RVLrOkhrgT2CFTS6NJ6qrJHZsmFTlnwzC4B/TW+8jqkxaDbISkH7ak12FV\n/71IYLY204mxaR0qrxzKp/fyDbr5iX840SrjOKzs31+ulKWB2yXpwLMcDvbS\ng0QyMRi5hQwH1k0J4cjBz/yaW4n4j54ttdpNba32hUxtmkCMk04KiWDZbbH9\nUKoF2oZ+UyqVZwfOg83LGWwIWzoMjak1ntBxyMid5hmApsF7C2LN0Of3g4Il\nxRqFIEOkUwQ3qmQrUqJ/TH9IomLgTZNYiwo0agNcyQBMrXRhNQB7EuQ7Bi88\nmSi/okKHCQkXChFoG9KrD9G9anExx8FugaIwdsZTNR1PyjXQdXJPVWvHtjzZ\nA0C+fNd05MkMhIt/kzIjtss+6JahW0Jbtbx57KxC+GgYs9RfJ26A9q1V8o3T\nccciRIlMexv4bZomZSwqSduVRMf2XAiPnA5ExWqpxfMgrtUO9S5PIQc2Hnje\nWquogkoo5GlstFrtL+RPgKE7KqLTWchsbqvNPUE57ZsYamBgB7ie9COodYtJ\nWtxZ\r\n=n4I8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9JISEDrzBQAYRK0+VMea63yltc+27E23qNw5/d6kaKAiEAvqmiU8nzjHcyEuiv9ARZV7XcAwGDsjCv+qDvhyrCJ+s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.a7bc45ae.0_1594315374645_0.4731742534909438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.b184bc1c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZV/mGfcYNDhLyc/mlt62oXMKPV052SsXyL8hzyC5QNS6FwoYstNnrESgKH1l8p2ATXlGAmdaduJb1V24XflZ7Q==","shasum":"7d0ed773eefdc7785aecac76a273ae90739ce5c1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.b184bc1c.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SWCRA9TVsSAnZWagAA7scP/jUvXIx7ma7nzjMW0Voy\nZfWpfiMJzX2/r1cNprsAz+3PpUg9pr2eUqZKctR6saZIOQstOT8OAhydTbEv\nUUQ17N/FwOhIVOO046vOZDRCXp/R0eMCXIqrZU6Bhdd3QQ4R1ZuouIRwBMu/\ndE0WT/Kkpf4pfGppK2hFGB+PEUQsUm+7zMQkd694n0ARtplxEendsRMFVkS+\nWJoDvy7wxVdWY8jg7IMbEWhV5s3yIw4YZ2BW7cH4Mtyoyf/tj/LmhqDRjUor\nFgwNfbyZKX74TfSYgSckoMJqy0clkq6Rja8ZNjKpL3D0XT/MsBOKMl8NcKM5\nkiXiif7dRndEtrtQ5kBRAY1jkAZ5p2WbJlr1M++FHHOeDvh8fOBOiUJUG14U\nY1NC3avgxdvv/nlPod5BN/aPBgzskMWERnLdDa/jDaOlP3+KteE9e1jyLAXN\nHL+MunzmdVIgHtggXkA0vXJ4H8U0bbNAQsqD1v+5v/pY1f6NR3KEZDfnr4KV\nybZOkHDqTmqxtUL8Op6Zk5zOn+8nniD8HBg/xVcRa+gSjtt3I9eWVdTYY3qb\ncyfwKaY3NRB9W2fM7Z8jnl97flmS0AkmZhJTKnOnDiul3764y7e7ijdER8+o\n3EEoLN6lcwufShGUVIuRoGMsnWyzTyPWgRs8b0jyJ0jzLV91svFO91MczbDU\nb+tG\r\n=6Qze\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICs4aNLG0Mjsnq2LNiR2z8/OGmuWOqMWvUB6zFuS0qxnAiEAi9QkzNPwYe6rPizbyLMJZlVANn+3x0SLxErMNY9nGNc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.b184bc1c.0_1594315926163_0.8708297010497894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.b39fde62.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GWP7udMyJ/rP66m0ZLWMxUp+W1FiTJk7rsVr0qKQopvSp5lE24h1e7ReVRMLUWYJC/41OZCZpUyShzH5xtCwYg==","shasum":"bb8d83b1585ceedddfb7f4d90c39a19cffaf7da3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.b39fde62.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XQCRA9TVsSAnZWagAAohsP/RN5aW1oJvml8J8LciRM\njZWx6BHT+IQC/xBvH8hbSdm+ftXmsH0zkzEazi4hM8hukACZumsdGUHUIOwO\nMuiRYvYeStmnaPrzdqTYxykHgtoZ2lvyRoX4JamCxnOn5lQ/0Hp3vnWRRjfb\n7BMdK1ikxpVpIq39C/Su3G3iu9F8lfzJWuUSf14HZK667UtpZoKHtEPZYzdH\nJrKmFwWw6Ou0x+CPEVoAPJShUEhHsRpWYJdLYIurF+YPhQOfB29dWfpvkWRo\nK5Ekad7zfxMhyITS0x8mDxctVnnMzIuBgl5osokKE8fpNOGPOyL62EqsCMgV\nc3cCKRkSHrvBASLgn+v2eq6Nyvb8XFm3NYeSWlEVUC9zAShi0wWVcR/GQ4oE\n2jwEJO5WLegzWIiJhVMKtsNiuoiJKx9hYQvOLqFCFuDP12HTCSdpvxUGB6MB\nDvlWtZ7/7GOPCZZS4CX1lIVq50Uvn9Xrjd0F8C/58Zt9WY/sLSvkIGTmukiH\n0UVUkP2Urv6U7/HmTSW4tm/ktJNGj1zPNS7fo6PIx1ujTmoZuEL7aTzZRQq8\nE5hsFciBGxoPrXGau2dUuSvm6uSXrWJ7Mt/jdJdn68MGswAbf5K8LOlS4tGr\nNUAZ/TvctQcjV1s3xVpPgid7wN6t4hgN3ydm7M7A/z9JQIVVRJx1vkdEtUDq\nt5+v\r\n=LRiH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGo45GFwncNZzokVux7nk8h3WwTtHadeKLhxPNupxNUAiBSl7anZ6/7bUCNoucQGFp3VN3dJQfZPWEGFHw+YUBorA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.b39fde62.0_1594316239842_0.6068301839656685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ww8dvdPAs9PK/PrRGMNBkgqIKt2K36J/iUPK3EFEjRpPMpXmlo0AQsJI3G4v74s+1ntfOjm1gu6glwBkUUo2iQ==","shasum":"b19b5321b20e24e18b04c4e45fb207ce92384b08","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EaCRA9TVsSAnZWagAAIFUP/3grPXfO/TKSz9nH4RRm\nkyxmCVvapPfXvNaYWd7898xf+QdLMUU5NCPaOufNuCE0DdzKWILeefX/iwTS\nizpsK03i7uNPGY+B6VnyqsArnDnwZ0lBYXjEFa6XTv2ILVAyl5AVmtMH0dx+\nRB5YcSnt3UmN8mf1MvLldmNgcfzNZ/7npfqvg4wYOQnKsTpPSlNWtFehi821\n+dy1GQIax3Xer8VM5XELSvl6kF0MRd8qYysDc71awisdbUrc6GOKoM5W4MZw\nJH0IVar6/yOEYkZXQMu8PvmI4QboyT8gJU1n8fdNNy7h1yK+z85/cciuEuu/\nb6FhUaFj64eB0f/OEmyQKYAx1eg7BEOzCeCBWLezqH849HG+MpkNwTSUHj+f\nRVJgeOYxNRc4KtDV+/edBqNFSUN6UQhpd47JLLrqSI/jS9SJ2XE4P8xx+Nrm\nRcS0Tj3hHsbQyWG+0wrxP+wOl1R4j3R9NzSFFPH6dqDhayKka4jSWf6RFjw9\nBXjbpM2PPkDCfwgaXAR18SNRKMkyqAlVIcoxiuTSL6HgFd/N/H/vFdQkD+9W\ncLYFfR4j6RTH4Paz9xYnkW8haJx5Jj1Ayq4HDbBt4Z4FnW6SHe3M6yg4wPcj\ne98Ljxnu49GTp00JCILMXCoWCTNkewU5Kf1b3C33ZxYBHjtiwy6IGiUf4xyS\n82WN\r\n=oQyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBaDF2BlHLEi68P+vJQ7OZwZ8qXMLi/9c0Z8BlaNfQ+QIgDKza8GKWggCwhQB7kmq93f+YNOULFhJcPCV13/v1X4M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.dfdd8d6c.0_1594319129840_0.5428532682586398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.11cf2694.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7oHRJUMGjLddR7V5gbXoljHI+T8jHpCLs7cZTySLAwqwJvFPiAuOj+Ql5+dcPHGinvdfcRJQlw/xjic1HxuuiQ==","shasum":"419119871265cf26bac3603bf6831d98e85093f4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.11cf2694.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FjCRA9TVsSAnZWagAAOMQP/A+jREd9h+SZB66LsK5i\ncmT9imvvWCOVhgWTui/afWWyOYulPQI79Q3r1VK7o4zW+YqQLK3pmmnZ0u2z\noKiAn4N8NGgkF+VVfqLbnxugxfpSzeXNcHshT/8Y1fcznWBKAUmW/ADLuufO\nqoTuOg02TAAxHojC/kp3JW5GkUBjM/NrF9bMLfEdVlwz6l4vkLrH14e7rOoM\nEfCCl6FyAa2ssFSEinNbzYQmrrQZf64RF8SsMe5VxFKhn/nybv8JkOo8Iz6Z\nOyj23NUR+Uf3tGDJykoW4GMi1UCaIOhIX4tij+5vB+SGLeVIu74PUjDAaRaH\nc3ofnO/atbDRCTibbu07cyyrGNipXkVnjANFnk+6Ot0m1zKNooEDRLWtHc4v\n56GLJAkm/JLs/PWjg/tKBEQLmaH1WBaFsHWgzV4RtcljDhban3TpXVZUm8Xt\nHPl7ON5drSHuDWSdShodnzThoLhBCTltG3UgFW6nRNBcXDdaRFU+eKwKLF8m\nzfKOlZWx9JW3hcItKzBTMOJ67XlBUS6b7vuefWlnmcEzd+xWaYF8rFlEWejt\nc8CbQZ6JFqdw8tikMPdr/ZfbkYvibRCWp/DVDLCJWBWqfWxI4OK+LWe3l11H\nddGGWhZJ6+eNjrx2lOvlb3xBbgtX0nwBHk00O8R8YfARixuELeAhz9TorXn3\ncAUv\r\n=VNFX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeJlG78YKurmCrFLIAbNupj/BZ/8AvVZKSsmRlSNz47AiAcU3mmTdtgm0PJK4yJE8qHmWlMoYgtUFdbF85cYryn4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.11cf2694.0_1594327394856_0.5842388991214416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.436d66e9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qHdS5qc2YVFSCiP9+naQ2UERL2E8m5+/eNPbfaKlw8L0YTEIiw6r4gBUlvqMRqJHyZv4H5sWQblwD3La99JRNA==","shasum":"32db42345efa28592c902d40fea2c1a4293fe977","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.436d66e9.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KCCRA9TVsSAnZWagAAxSsP/0dI/Mvf7dFprKayrxwZ\nQKQ6MkIU3byxfNbTJ/c9TOzsVcHBfZzWS/gShId+DxlfZHQH9qGDCGuTA/d2\nbhe8u1+lhU3fEXLLZnem5vUqZGZEwX+WPcREbGBbiBKtjIRN1FApF7M0iyZP\nGN56nYI2yCpA0qQ6RT2yMqpxKXlX4avPyGspIlWdiiFpNdQ4RmpgBYU3qbfq\nHC9j3UgG0DwyeNPnzfhbHUgm3ZlRd1/WM7dqBM4+n1/a/1qU2YJhuETFfoo+\naMuiSMIBpqbYCWuhBHzM+ssto4wZUslb4huSQiA0szOIngDgaqqqtlpalQWL\napiekPmM2vob4DNJoTVDJ/QxX5Ap0e0ob46AzJKqfYy02URHiBVfIG10XTT1\ntJ76r4h98SjKW7Lkem0snG1Tlodd/TaG8fiiexFNol67Rrv+ZoGU/3kPlWfd\nFq6ZQovV1dbaq3HEsMjmUsbvoa2//MItt4E0rp1l/ZivVug4iEWKFtaCzChe\nJBuY3XUi+pFs4AL6sNYBa3jckOx1HdOMnleXokvQXc/8lhxN5H4bzjbIttlf\nkitkVC7masDHLHHqeKZlYBt0SUf5Ecnjs+6XJeB81tU0IEoDRv7ws0GFTHhV\nCqh4LNwv41yofAI3SGr4ya97fHgHaHVnnciKV2tCunNqw7jj9ydLxqusvdoG\nPeX4\r\n=nx+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf4ucC5Rx7kG43mUgP0dIuvj3/7StFZGsdQKF2nGb7TAiEA4NNCXO3b1mnpNzqg2637/gOK6jsnYKcd52kC5fvFF9g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.436d66e9.0_1594327681908_0.029702588839058075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.3a44d36b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-695dty/jQLNLs3Ca+TArjMqoCI+VXSm+L5DhJJJFwSI7urv1Ckv+MRZlnAAQC0pczdlYxhQIdA4SZXa4M53SGQ==","shasum":"e14920cc8c17c4868a8668aa91d35c2239562b6d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.3a44d36b.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7gxCRA9TVsSAnZWagAAajEP/jN3G15eis6YURzcPGxw\nLNrC/ND3c82hDFwjjWtemQkToQNLrbxTi6gSoslxovU/hV6xC89sFerRgwlI\nBbI+BBDNH0jUtfAYE98XNywae8FFBGA8yf5Y2TTSPSe9ZLOIFOkLzPE7DZtz\nyBVan9rmtdSIanayyUbAPy3LfaQ9rM00WXTPAzcyjd3SZjmu/s25S2BZujXS\n4W6wBJpJ2fwVvsRfPzW4MaCWJ9HeqEl5+fKoxNew2H8vIUvy5bnh/BRt2ye0\nWQG7Jr+WkOG5YDQqi8Bff1nZEKK6CrX/PZV/+KT1a/6BgZyjCHPYFPJb2AnL\np0AsN/8nYUAx2nZA/orj4eLqrS+wJlYPyCNC5LFwQpS9o4NChIcUnbQqUnms\n5RZPuoI0d3r7V9b6MwlK1mORYhgathiHAs5Bu/lWY0AaJD7mdARwSQyDILw4\nnoSU46pXZfgSYBX5xFUV+fq3G/OgeBA83Cq48igKP4Bw5M8SZvEg9BRuxuOK\nns4e5LAOrBTmWVPPX85CXL6f9EkRPB3Bz3JzIE88imoGPyzsMtpeNBUxn+Sf\nsazuy9waY91BntlZ+qS10GJ4RiN9P+KEtxkIU99EZBe64nIKkcV9b4dQbUHz\nm9mlz1lHjYzsayc3xcjR17beUiQcKReDjh7tFRZeb3Drx92CcSA/U+DMj7vR\nsPJM\r\n=UoS/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlud0Iv0YOCGca28e4n0Ct1g9k+B7VmENTDGXozyvb3AiEA2/q51GfQwHT+XqIaIvFwXXXMwwxp9yw6BsHeviLdp4A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.3a44d36b.0_1594341425132_0.2776669235670106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/ripple":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rW4aHZfkcO0Gpxwb+RmbQ5GiP2emEbVS929vwme7NWfkuU69TbKJh1Qoa+JCg0c5BW1pmkqxPZBdSnTXIT0Cqw==","shasum":"15d356c90c3bbea2bc677c6c18b7085a7a18d345","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.ec11ae6e.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKroCRA9TVsSAnZWagAA1oIQAIhAjCpTYdiphPyx9H4Q\n1M0pQBACKOeJn48Qg38i3CLj2aX/SwrVGHsiQJ+tD8nLpxAjWahmonKfHtsn\n3USJ+4Ma8nkKGLrnRKRjhP2lnjrEzsv3fKUAUkwUKPUmM8tjxdlfBAWsaqRg\n15zuVdVV2NTxb/ViqslHbnwModCr898sPHIrn8WVoWBW83P+FNHISWyrd/ww\nSZYGg0ICsecELtINu+gMtUvzh/wYWXwC6z+muyk60tbpyv0/KBl4Czt+aXlf\nsE9N8C750Q6buB0p8rEZ9uSnZ4atZ2DZx+mOGbvdVW4i2W8b/499K9RUWb07\n762/640m3/vGy/9z9fWTWH1MmF5sNFyO0PuLLsPeV4ctiPmCRyetmFqgG8gW\n/f8FS9l6m1XHxZl9Ca8GRgzj0lelPHWEZ+EWD+xwtoqPCgFe/dSIXrFZ5k3Y\nzdMdrk1xqEuYJU5GGNlwNAq1NUlGBjn5BarUoq3sa+3U4rjPF2BkbV5hDNSL\n3BrXDvUN55Fhyw3Mio7FUGfPG5WgDxuhi0GB5eHH2bvKegmb0T0/NmOn8Bgt\nNyyjDKYXuPa4RNzjGjixiaCf7nF+uIBegDB9RhOK07i2i5iS/sjBDdiIxTLc\n26CzI22rrevXTe7rSCmtveQ1ygEuV7TEu6Pjl0TdUvzHXUp4AsDs6Yh9aD24\n8IcW\r\n=APPD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh9q9d1VUdcEPK10hJh5X8bc/JPYm2wYJEVBKFmiH2RAIhAOBPRWPVo9rFlEqXzcTWZ0SeaKWm9cugWC3dfoW3xKpQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.ec11ae6e.0_1594403560007_0.5360232636665416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.17f6cf27.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6r7anj/GfvW81c8+1oGIyEl29TfWlHtUB6jfzzmpnCCBAr3Utm9UbV2yDBhyAcB3sZvknnzLoOuQnmkVO4QHKA==","shasum":"012e182cbdfe0878078631afe5f1fa00818df88e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.17f6cf27.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRACRA9TVsSAnZWagAAEuQP/3/HZ1lztsfPmlJOzpW1\nlarJIq6tII87A14NRoZndsSliW/a6Q+3szupkRUBk/3LS06SVkouJ/NXgiVY\n74CEKXHCRJMVvWnaB7MxNuOWo/LL8Jrqt3BqE0prx3g3ZCPHYL7xTEzHiFFS\nLhk1QyjTH+HB1gwythUAHeWbDjf9OEQbIEV77G+11RFook0unDdZCSabreZF\nxiGEkkhdH+jUGz3o+nATJVzoe2r1JyCcztmiK2PqaaCPe6ZNOcWVwTKX/iSV\nVRaiyyiURDYmU/lyshIE5St5Cld2QVrhk+HICOS5T19UNdQZCCzePBEfx/zQ\nG8xsa0KhW6/TAdmmiSkRWGzJPFxr7uiTB7OHH3q6tKrJejneogbriX6xa7ys\nhahBEF7eyTNz4LDt1B/9yFqoRHvwUNxJY/A0Yg3uWaaT/0lt8zs0twwj09l+\npl7BNqFGtIgK4w3hKZMmmI7hvepLF198ibF6GiJro1tfUJWm0cEsABhI1Mlk\njFlyk+GA2RLMZEwqHz9VM8TZz1Knv2rFjyWTUVr2nPyEQo8FCvGiz6uNnMzf\nBbl3rKV93P6Tj3dtCqdwuZT8BvW2MJoRCYyKdJnnl9JIhJ7k0q8tZOlNw6KB\niZ3XhLnU6iu+QECs/5oYTzzjwgZRMr7RsRjq+r3AA4t0brnJRE5ZnHG9spx0\nR/iQ\r\n=Zx5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVkk1V2X9JOKmYnuQcjpEXRb92aA145FymsagUjYzztAiAL1tCjtym75CGa+ZSPEewr8/5oWpGVINo6qu8uyhbEKw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.17f6cf27.0_1594405952319_0.3265283261480487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.efdfbc21.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-h1GrPpISsYIGWAU8ZMhzNwBdC6dpqdZLIqt2QhlKk3t+JaAl4bw1t/giTI6vbRn+kiW4sJpIf6Kc5NN0znM01Q==","shasum":"5c53c501daba96bb6c5e4aebf7a03f379d722bc3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.efdfbc21.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcACRA9TVsSAnZWagAAZTYP/jJMn6AJyKTmEo7jCYCW\nzH2+b6i8yGCRSa+rdHG0C+dXuLzc3Tk1dhidHOg2+poaJkOHvDZ9FfkZjYnd\n7JHv7Fh7/Eq3HATFHT091fDPKDE7/Inm5VS+ZsuKhXdeOeMty2Lf0jG+ho5+\nBpbo+bvLDq3pAo+UFoFD7uQYTztrhn1pHYi1gkR38TzZ9Q5R+qiezvfoPl8T\nIPerxPYEFEgoWrDwR9TuvghRPbapHlkFUFIHEuYBbrSnc6JHpEB+BlrSw0YB\n0AETithP0VKeSymloX9FL+rL3iU4Lsw13lJivgX141y3B5hNQJGtwYVV6uM9\nnj81djgxmR187VowtKkpz6NyMV4hRt/mtCn0jcMSQLTMssDjujvlPJb4e8vD\nUfET16MkMPZDYr684ZeXgrsuxmD9WOaqe25jI6wlnH0AmwMhgOB80AJqs5XC\n0qpkmxOEjbRsMJiKPCId19GTwfwGv4YTa7M/2ItCm9oiQUWbMDh4dBeyFN86\nY8OkkoVaJwm+LQsIaBB2zChfg9mG4jqpeXxMnO+5TV8Yls4cKXBH5v85Dqvk\niwvQ0h5mQ32XkefAeuRU7lxLq02gIH5OHr09K3DuIpq1SJHhUqh3sOOR4oKX\nhyfbt5qqAKVbNI+R7Sqxaf3ZSEa1ITu22u0ENC4rPbMXUmeX+zaM+1605vQW\nFv0u\r\n=6JBR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDU/tJZnPgzOFs6jQHzLjabXJn+Fw7WSF7tbttt/hZGMAiBbA1nAY5EHAoRPEaxuZGQojvnQP7vCUqWNYk6/5YVqMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.efdfbc21.0_1594406655967_0.31341201503735094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.bae4339a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/ripple":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0sliCy1GCD0MxlYZoKVNxIhGmDKJx+1mdybav557ktxnKL1lELOpbTDNZKSGnurubl2CLpqSMyNYnr8cdnzogg==","shasum":"68f363ebf16ba6af8f624af8ec2db7d201788134","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.bae4339a.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeA/CRA9TVsSAnZWagAAawkP/1elNbMRl5uYuWkbBFWl\nL3wZvJl0y9Mzo06Bd3dOyWPqg2v5pL7CbJEAk0mddMvmwKvzPW4Cq6uF+TV4\nOfyrLGtkFP8VZ9tRcTp+u2TNmAVrBd4ERhFuUFjO/xNlgD1Y8MyUvAbPphhG\nEb+aXJk5cWPD9sjwS/3P6SpldX/hqXqfx5wHCLI7XYqMZ6ayhzXtkgzAB9uc\ndDpMb9MIuCscwlxHZECHz732cmI7pI89EHHV7GSekLqXWe5YZdAisywcVnKG\nSjtZb6j9Adv1Qr8EYJuVcZ1efLAwBFZvH40uMH1DIM/eICl+ZAkmBz6ayWit\nXUcRYORCD6401CQRozeumAhQ+EYE0J4ZcGAuahI5cBmtmdb4ImzATjoK2Zce\nIaHLBf9avh6YJymkhDWAjWTyo0d9TrSVL7WT8/2YMYrjUi5/RwBfuYJmy3cq\n6WLn+Wkzr3Wm5ZH4t6M/DhoL9j71GNediBDpLzM35Cd9g6UBk0Wx9t/nv/Pf\n4JshZJB8z6rmppuxw793kN73QprxdpgUcAmv6GhFe7FrrlrrIcP/UEjikVoD\nw/YAzP0d3P4XAcrupmhFqYeAHkdcnmDVcwJblB51uW6OwaLnAz7gbwvKPD62\njDEBQAWtWvqSOyJYBA21cS/hqZEdEKAtiHnn4QFQlDeM4smKLU/vhjONOIJc\nQDGY\r\n=Z4Qw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ4t9NloZ/5sqxY0JXFUdLOoBlxW4CBudfCw5jW9sgSQIhAN6YNC0Ff7J2ElpW0pkjv0Yju9+76ykCMVvkJD9OSwMA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.bae4339a.0_1594744895032_0.7200920988791928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.28eac13b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/ripple":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TaoNF0zgJRPfTFnS84fC1pXLZSe+5c1WT2d4qLEWe1QUPRcLTLM/ZYb6I/j2fbKURDyR2yAtas8zskToUYxfkQ==","shasum":"97c0ca67b076b9a359b93e679e81ca598d9e85ad","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.28eac13b.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBKCRA9TVsSAnZWagAAkJoP/2kH/+MFnuzoU/UwRjE5\nm549QGHfknlcuTuRAnjZRFRq7VcEW56Yo9lHdijfmhb5/MmrZXAtvuZish7x\nw3dPtqHB8ye9W8IrIIfMcLE8ZN++ounje2bmi5kURPFnzwuAxNUzPwJY0Vlw\nAxrW47+aNr9fw+mMuZkeu+mE3ENSCvIrim43ThIjYzh7nTmGQj9Ou7NyhG4r\ngABCggC2d5oT+U9EUgcpEf4fojS0T7WTVp9MCaq2qzKmhqtZ1jx3sfaxmBby\nWisTYVenQ3ImbLbYBTteUaiCAI/5g/7dT3BGa4yyXo0DGpT8BA0bQ0ewRp02\nMaP4Ii3QpRwSRmNVafCvpbzKO4Fvci2ZYzKJ5TpG0Il2yB9J138BSqSUf9yc\nB1UsT3Iw2cSE2D/GUC+DUFY8T6idWmm24aY/LMiaXZ8PBuX8jwA4RIpm1S2P\n2pPg8a8azrRxUBw3qKM17owJPXXMI1ezmdibLfJPKmAFZYcVSAjv3C/4dU3Y\n5gB4Z0dAXcfoP6vs8L6FyRePGPNaEHswtF39oCiUnU2TJML+N+HbDBlcJuVc\nDio7RqnRUFB4RK0lqL2dhmOaOQokHaKyrcmWZ5TA+hV2FSJ34Jxh2ow40fK5\nqfDsWBQRzSG10Zl8c8h9Jws9KOvcxNVgQNmDvhjTJOVmquq2sBdfwNen62uz\nOh14\r\n=dLm2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwTOdRxx4T2tavTlfnyeefDm98WD2ruvOio1NZUQAvnAiAjlTgZmXW45Vp1MPMekAcvb1PXixAmOIvGnhvwnHHtFQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.28eac13b.0_1594765386307_0.2750842270853915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.44966b65.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/ripple":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PW0HNietM9RwYLcofQCa2V6FdaH52wqzXQTeXV/7tgBV7TqPSFeZ2Z2oQsmoIOjFb10WNdXqzxX5+Rt1lPKLZQ==","shasum":"a5e6b80430be3bc2964a62205193b6999e511638","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.44966b65.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0UyCRA9TVsSAnZWagAA+4UP/0Dc9huNg6klHp37uBII\n54Bov6CXF34tCLhFEwEumPiCPu59DUpbQyMJ7OFMbZY7o1/pmpP5e1nEdGUk\n0ls5cBckS6k6pFsL4UNhxLPpi5NnG7XSF9P+krEIN55kbUlH0/Ki+5Famh8e\nCgBnatIss1t7En17oyi+1Gsb0+nPnCCAOuRXA05KCW9y6LsCxb5wUWIPsHhu\neqjVct/GYauRIWVN8KkP2zFTGeOStlAYpeHlYZh2dpvDgotRALr3MZTJuK+X\nR4gI2ip6UIg3HBYdUvjvTUh44oE0UaIpbGZsDpxabloqf69WjHm9koXiPuot\nIAiiHVq9QHs5VWghlfNT0kIqbYXi8RP7lbP068SNVmg5Tdks+s8RUfr6/4hh\nLVXmMRtEtE2S8/6kMfzYQA54SdEg+E7ciVLh6AGfkziB8sysj1niFcqRHbfD\nFxL7gfBbfcQ4BoRL+qPIX+rE/uZhc9zUTMQ4dKoVLRBK8mC0SL4NHlBE/nqJ\nu3Ts75fwXP+rvWWdKzDlomCzc/kOa0uP72kUpv36VN4AE4qe6RhZ7HB0VCbK\nnZoY0CpXS1oNb9BczFI65Fv5yQNbZzwV2iVabZE4kd3gwA0YsBud+10oL3sj\nmQ3vnv77NiEXpHUUG/s7BPE+i/2qk2/ZCjje+1lT97wtHQymik5UwoAnJvLz\n2yp3\r\n=dtMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNnk87pWi3fojNnYzfatNe733h4vwZJs5+AaOsNL2ljAiEA9gSB70AECz8CCHzOe+XB3g4BowKLYP7lM1Lsbs8igNk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.44966b65.0_1594836273953_0.899364702318282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/ripple":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xB/16t2jZILfG3Dije5EWWHTMwWlKumfvYSbJ90pjcjRtHeytwQPjQMkrj0WicX/Pp0QFjnMf9Qu1Fph6QnYkg==","shasum":"80502052d4ba1bbd1e581addb5a185c438fb68e1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.3ef0ef60.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIY6CRA9TVsSAnZWagAA5FMP/2tA7GBH/PHwmH+0sr9W\nADELN3xl0ZnNUZ/FFW0lp7pnXpgdoGHPgU7zZ2E5cgokNywR8rY1UtWGO/i4\nIN6V+BZhALALuBKN7gC4Rr57eNfn3+r8+yzR1QOuuJWcnmg4IYc9H24U59hH\nh68MMJgxz+PS4dFuTEe/QzBUUeuJ3+vsw5Ue94SsgjK8wZnKPxHyUD1R6D3w\nx7HM+3zuSvIapzLwhcW7cUKgvmBxcGbr33iyi+c7S51Xfx0fugSSniF/lef1\n41/rLYtPgPmGFroT+etAR4LB12lMMTmpWtDvLt+RvkWKQrsJgMb9KlYJfgP2\nRtGWAS/49Ln842TcogFvRtwh82A0BD/W3G4k2jnNq+BJg65RfdITkvI3XCrO\nVpWRoUHBieTZRp1gEN74ABp39dMFU6Pcg98UfBjQMbINYHxW0F9PcgNvV+eq\nqva24A6X3mH9I8deiUyJ8dPs3btchwHOxuETbtWfcsIiFS0ux1RloG2tSaQU\nWBtZ30bYpcAWNdkwS/ZSysuFCfW8Qq9pS8tC2E9DyP/s+i/7ScBYfAyAGJ1k\nNEx8RGmkF0S82bJMm6kwJBT+FWiHGBO+HHiqf1XIbZ1HEKnO2Hd26QL9Q8FF\n22iyFnNmKcPvCf0qRIHvu3q+5by/gKmKzzwsESARAWobdqF+rSohqBVHHOZv\nLkb6\r\n=7/9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHH+IaRH9GV688tuq8h3OHNtoM/oREFX+/5bdkR3zC4WAiAUK5c0sjqiFnVQzSOvXuESChYi/HfZ9GygwmoCEm6L0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.3ef0ef60.0_1594918457645_0.4364470232496027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/ripple":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QpZ+4vJNdVl5u+luIObpG3KqbbsFvtJLaaZOpoqoYfDNUwqwn2fyd1hraBRK1gDi0urCYcmvfraVaxRV1UBbKQ==","shasum":"ccb0ca272dabc483a5e04ef837721745290107d3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.fcebf9e6.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZcCRA9TVsSAnZWagAAQQkQAJuPoxcUL8AKpcfdRx2P\newwY8vfBlvZ6y/hsI82f/rjlYcXcGIS5gCHVRTpe7GcD5gD2WgYB5JQFyT22\nYxvPLc4n/ioi8QSZP7e9Zq9WYB7pJz/aLwFo1L3ZDas3GoJYv24G1TyzeT4k\n8xBJEQmOLTSj3lzbTElENYRgAMNiwwmoKk8K4e74Q7kLkNe8dz3aId2yv2Ht\nmsmpP7XZug9O73mbXCodXJ9TACTtiW3ORWZUh+VnH57bR66OeUfQ2WX23rim\n+nU7xXWs1RQE2fCxnMg79ET+10/Dp9Ylt1kdFLMDqdnJab+QASaUcBjEvHAq\nnX0j5dgLOXEGIjt4aGx3guHTulp0DsrdpH5H+dBXUtkuVRsJhN0r6GRMIC7j\nSQQChzPw+0WiDYUmR+oD652pgTrlEcZwmxv07c0giak2TbXnocUMRke5KrWj\nFgy8zMRQMgxmqaPcXgJxG3IQYod0bKJftMPFtYINZQa656hiH21C9CTnRXSO\nnRhAR9KMIjeNLchGw92jTRPJGqOveSZOi2NVTPxspyldqGET/A8pYPnf7m9q\nCOOD8XSiN1sdWgXYsJR+H8/sOrcTLOsexRr25jWWhb5zwSCiyoK7LKZ8XKbH\n4f5PULPVn4RLA1PDSmtCjz2riVOD4hsQkUu2mjlPlUhgXfMlc6PQBLmjLFXl\nCE2o\r\n=0AlD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9GVZEwILVu6b8+ETlVBZLIj75Hn6ev4D4LYhph+wRjQIgf3TilJ63abKU5uZqhwE9/mkzbWpDD2yQYyVW8uC6IDg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.fcebf9e6.0_1595270747557_0.4587392929290055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.b6a772df.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/ripple":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dfZfpaljMMHX6k3uCHwig1CgdjVls9rF5CYaTo1LkHx8ADox3+cku2RYHs+95lo5eqnmGzfYHrQ2GgkVuzbfxw==","shasum":"0d96afca9f7452a15b1d2d79471f5d4b862b5987","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.b6a772df.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh60CRA9TVsSAnZWagAAzf4QAJ5qFEsXkiyItiAkYPW/\nKxVFKK/EJHSISGTaUb8dGtw/2yTULV1Cg9m5u9kCLhXUP7y/FqwmYrk0rcKb\nGG+BaW41rWHKvelKlufOe9rmA53RG53bDGdBKUhaN3HPaeCiVfpLYzicJtP9\nLr5Pr01z40gNZDSmH/F2vN58IowPUjlp3nqbgghq6PgLlyDw0aw1f53sAXlQ\n/b/puG67oHR/2VpsJrhC0Wl2R9h9HnHkzatxrr+KefnltstclVzqxEoxnBEX\npT9nfFy/OTi5wAiuxWECYInp1CFkweoD/H5StGVGo5dhDD62ksqLAqS18JGt\nan8wsGTf/LLU32n2siGf2OXdbfDrlH4F/cJ/ekR9FqKaG5dmgdhVWgYPvbY6\nUV+G/VKUN4AHN9n2SAPBBQMx/kDIxqkefdOGXhCtYjPPEqocBnwfl0s9vnv6\nwr81JqJJ5FPhYk0sUX1NHc3HYfuJC1uhTxwDY6k8Q4upe9c3aD3nE3Vdn+HS\nJJHH2OiwIm2CejT7WUF3dfpSaAs3kT1iH3L4P2w6bRe541rNC+ghJRhotCYs\ndh3Voff8tiFTbiQtudMCaJtYGrgooItifwolyJbRtoMtBCi3Y7Fof/Gj1dfw\nAaXJhXpVTioHGK+FymJPPwAtXmuIepqzhyb4+7qFy0oNSMnmA+QeGaeQPzIC\n+Qc/\r\n=x+Py\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2zhyRzNAYJQlK9FrHe2nrnN/TjrHNfuj9ZZ9NfPED8wIgCk+Fnr4YUV3YxZvdETenxd76VGg60qnMITj71JCH4hA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.b6a772df.0_1595285171779_0.8053057357349966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZyjuoTZYYWHe/GbiVzI6SWdgbYR12W3SAVwT/70TEgfSbIW9zABskt3RG4YJVGmP5sXS73rw3DZr3VF990bXQQ==","shasum":"ae8934c5904ef0163685c70b0a33bf7f751ed35f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.f6a6ca38.0.tgz","fileCount":29,"unpackedSize":110737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqFCRA9TVsSAnZWagAA5hIQAISLcY7roe01/CckVW59\nsCHKlCgJ1svNQWOfAur81fn7SVPs8ZJd4yEDwgBvs1974ssTA1trp0IJCibb\nAPKkX18k3CvOIo5BpV88Udapcg/ijMJDeVLmDu6Gsx+whY5/M0N8VSWmtxnz\nRMFTGEJmbNINhUpxuUgJLsn9WcIZYOuxeOEcMTIm4F+3XkKEyHsE+D8qKbI3\n10unGwN0vKF2qnEHYYXevAW0J7vU3QyF6WMWeLi4PeeWz6plXVIcq5bQSY+G\ntp6Nc5f38vgQQ3kqzx20osgRUuZz0Ce/vbUYftHAvfBunh7MNzgrPg/dyWW7\nH+R9YHMwefmfBlTI0i3FO7L0Pqtqa2PUOurFMGGjxLBKF2ikKzBMo6P4G/QL\nKeFl8DvPr/GgKFchHf2RKdn/gqq/BjqrcpN+C/reZhGxvM6TRgoNPlW8zxX/\nTYsUPKbhBk6GJP4fMnQ2MTXdnZzDIJbtYfagya1ZmD4/tuAn59UJmZxVtZxG\nnvjPDQheEBYdf6sJMkXhJOFIdd1aROfbak9Ttz3Uuy9vn5us204mV3o4ZgOs\nn1XFaaX/zElVQmTKkVK0NoBXleUUE1tI3HBNdoo5i1CyclBYIb4X4OKdHyc/\nftSZi6sOVI+UzzBB6KTHiIVMWhfxNgz3N9cS1WFaep7DTbTfakQumGTPfW47\nikjn\r\n=2kFq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsFTaropWoyO3cC+ST2uNQHRFPHJmyS2mLUep1bpZnFAiAFCHXdgdEVnAUW6ECUdJgehdGs2d7WjGZ/8/9+A3XlGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.f6a6ca38.0_1595349637203_0.06371739673554355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.647dd6b7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-t/l6IQvKGuV4ILvuQdy8c6gmXmKyHdHeKybxFv64xmJZOEVTbNdWVP3vmfr+7sSQqBYb+Uzj3eZeJvClbFHqUQ==","shasum":"ff892b4917f6d2010ca1af30db76a6697eceaa0e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.647dd6b7.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzcBCRA9TVsSAnZWagAA+rkQAJMNPmIoIGWbDlSNq3P9\ncwvaqynR3Fbf0Zk0w1XDhx/nGubQuwLAtQGo2eWmBMmKEDkyJ8l0GUAU3QKu\nWX0RUkeCNsDmLvGUGV5ynQPBpATjpCoPL7kpgcBDr0vsUHuy1OaGWaQMMKet\nRxWjtF3QXlVYiU1Dj4d7eHDWr76d0n6SiVtpTyYmfTZmSwJxRNVSjNVa1Ky9\nXfPf3+y4inXo3VepLaRq2ximXkTdqqv1NkDVsTz7Qk6aggm3LEfBVrXIWiPR\nTSqjLLFLGYtj+AxR7/eGbOncGMtkWrUBOwrdtPA2FSllj62GpHrBU5hXgm/R\n2clCmqF7EJSxr7oFdE/FpUFqP6kctxsrFwnOiicaQXHOvBBmxTZLTbMBQz4I\nhYFNiwDGhA2CRCa7jKWH+1X+q4YOkEyHXoYGAmr3nhAHsWrQdClyS1MBQ9SO\nXIOqMv/+VwXnmXGeMGWl+ANZBtX0N9zxntZULBgypwGQsKrq2/Cu5WeM7r8V\n6ex+EGA8jr8YCasvOY5CxxnFl2117AT2F+pUcm7B55vPu2C7fgakvp2IOncq\nJMSj4J2Zeg70bStSDS+TryaGzgNHyJPZkpiE91npiVE9+WgeOLLmF3A5Xl1Z\nEkY/5zcJrz2x/wqJ6IpNiyCm95hKmrefUSMIeq89qwLmf+59nHPc6LqatN/9\noCow\r\n=/YeH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0Bcdtw992g9hcliq2khzOy+EeSBlAKTqVdGhTBzFunAiAG2wDC2YQARdB4L0hJOiD2/uNgPklfr4Zo/hGS7zrwdw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.647dd6b7.0_1595356929523_0.9164872937073048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.3cb7406f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LsHhoRuTbCGHTwNwgmCtTbOjVPVsve2P7GVM5kav8gU29HDOfSTST5spSR18oH5u9CFOATfpnIYZTKB5Quxefw==","shasum":"ac4eb372243a8ba568edf154ddfcf817e7cb50c9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.3cb7406f.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwICRA9TVsSAnZWagAATOwP/0HiTo4CnDr4IByE5G4X\nct/izkvJ817zdETlE+CTwheUQvpYuG/ZGi+hmSnZKopnx5fdHKSbVzluQEGp\nYcI+vFf90sVMlymNaWd50qICTGs55b9gVb2R4tejFN+VDwZKdH53gykECAh5\nHUSiqEr9IOp+Be50+j37n2RzOADbXYe1KoVMgvSemvwoHOIa5lBYayhRjQm1\ngi7ACd8LioEbwCubu3YB8ERvkNfEMewfjlrKKuF9ZAkkWbKGBAkR+zI4bG7D\n4DSEoQkkLvZGXAPDxUjzdBUuwwRsbwPh/L9sTHsDppdhWz2b0Eb0spsfOgwL\nH0I9K+HBIqY4xFTrqgjuOGmCzv5dyPW6NFTOkhNIPXStj6eJyMGyYLqoJnjc\n0uCfQj0udn0ZAmSFo/ggrgpZ9NFSSvs0Ant/ddQO9JRTkndenODveQ7W4GU/\neGwc8VLkpdeQ0rYGhxsTrjF3OmQRALumMO8Wbxyz9I7zHryCvCY16w+b6QB5\nK9vEgcchhCzhZye5mLw6KnS29FKR2Sq+A9qiCvrUM1S526GxtRaFgzjAwuQ7\nmbSDX/yo92/wCMrYxL3YcpurYf6wTCPhzyF42sSVbcOQ9bMlDdNnojB8K2Sv\nEfuVZV2+FMJ1UAXs+Z/uvpE91gdyQUmLYxXHFPHnIkKSiWIqnFz5RFB5DV0w\ncNeG\r\n=qWRY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUIrjasxCi7c2lpZf04Cy5RmFQFutFFyjJbeUdWDyaSQIhAMlaSxS+U+GUgFcT0D/iZ0ju05nhAhotxxl4uAwxnT4U"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.3cb7406f.0_1595444231613_0.7862236347646927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.5717a5a1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cCwLkcYkOBEtyoQrb66/tw0hVD3WP3FY+zQs66YHDRbqnWn3K0Ik09kufjwgw2U9jzc1JVhfd7dbfmSp+J929Q==","shasum":"41e20cd660782ce8498b2a92f4b4d497eb61fb19","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.5717a5a1.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIdCRA9TVsSAnZWagAA4K8P/0T4EKDKfV/ssTnJZ1im\nOePk2BqQSnepMhi1fqv2KqMDzS2NqZ801rh2DRqs57E7sEReSUpWwaJchEuT\ner+0ts4PlUYfkXysdZbo0v7hmXLIFHIuKLyEG5F2Oe7bxxjpLaK+Z7xUjjfW\nvrcxIzn+1kRE+udMaetkQOrQjpQ+uHxnhY2keM5KxZUEfsRf7KtTFwnpvQsu\nL4W4czIVgW0NP0pdxWOC3IOaOhztKmir3fRFAetfdyAC7t7jHm2VggHyZ7M+\nqtcqz0yOl4mTNkrzQiJnmxudbEIVRT09nGjSNZcQF+iwNWXK0cRQkZj/1MxL\nSXDrI1gNLW02Fo97t7btTmwX5hUcX7Z03th6bMXd4XlABYJS9DooXVWwiIIj\nwEyHoKig8eHQ825peBUlgnk+FO0zQZGclwADub8kqHgwdXtd3KfW9feGPL1N\ngN8xmGw3MvEzJQlEar8kY0thfhX0xT1zUKardVgvsM3umNw2B9JvTIckiLVd\n8swT6meyZMjZ6aPB7+/UZ/NB1XxtbZtUpL9jn9+13Fi+sq6sbHLJT/YhfaYe\nYzV81mIn1foNWnGwXsBfqSbC7TiQv3Atk+PLAErgsrEXVJAzhOSje2K7J7Wz\nb2+eLy7oNSQEv1JokYWPOib/kSY8kvevgU9jH4tGshFWtvsuWiDtCLp6MuoL\ndH+8\r\n=Y5Cv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0kqS01BHpe+KhGs3QOK/LDW73xJAHndv4P+25rvmaNAiEAkh/chAv6saU9562gmYOQ+mV0Un4V32fgUj7GzSJiSPs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.5717a5a1.0_1595453980576_0.8741893811373038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jXAcTyCtK8sgRj3+3Q9Zs5/NbXOxqHfw+fsSw1KMfKuitN2iX4RNZl4/lj8vjIox/ebTO5/H2dhuEq2TJYxGcA==","shasum":"6c5adb2cde1b33d8a603419b8620f46dc0fbaf76","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.d84cd4b2.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKQCRA9TVsSAnZWagAAVEgP/1y+KWtfUKASESTYYC9J\nU2EkOGZ1l27Et76O23r+138wTmp8spo7/C5SClEqlLbKqvIOXzFq9A3N/mEm\n0lfjagLPUOFCrBrwQ61LzvCUmTelzlxQ2YPjBnfTTf0xWcQWWVnCEN4rq17Q\nPAuVsXRaT9mNYIqOJLb4mbFxHI/evmMQ8jYRXlEFnfYicMOzaFA1K1wVXBog\nTUGDN5ICkF0FL858jDBvuOXD8khttAB+QZo8UBRYh0qc8P3lCWgjKinUWzSn\nYviZ4FWGn21lUwqBhVBRJoHPmF8BwtuzquhprLZ6hFbeoypTUMJLG9QV6iIq\ng+MeQtj78JJxxe5b4Gb1CYN1FlIV30Q9yXW8PPk33EQzKlPXm+mPtN3GtkQu\nyCOt3Dx6zyUBogu9B83UQJC9Gv9u9sjiyTxS1+k7zi9YO/ftUoNMUdZ/YO/0\n+hVgQmHCsPYRiiBCy8QRuHosxhdKbFONvV2K6TfxDKRZT0zV4BrL6FTAeQb9\nVYY+dJAWAprq1XuCDVBWcqJHZxeKSRXkgkGEVrkoHwX9m2+79t9ATV0BKPqF\nj3NKf4cBAHvrg/ZBArq/jf7Y5V10qAWNXsLxw6DgKL1nrO4KTBPU/pRSLUzv\nuvCdHy+r5Q1z6JQjvTjdOVZE9YLFTEw9t3CMznUMxf8FpKclfJWtnlUo50HD\n9igI\r\n=2WBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmt3h3uQ/FJ0fU9Fr3ii3wrW27rX0IYTn/MayTfZ+7OAiAj74Wy21EHyD0KpyPisXQBdmsHDXBnpBRrwsxnKeEfqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.d84cd4b2.0_1595454095871_0.14263296442594164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.f279e7fc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bTIKMpfg/2iyV9KuRBZ5uHpR0xgznWsEg44Si15xaSNrbSyGKiWUBGogp2QaDQmlhf1PnS3QPos5gN/eW1eteQ==","shasum":"d53276e7f3c84dbd78bac82c7f43b23d7c4c7249","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.f279e7fc.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLb4CRA9TVsSAnZWagAAP4MP/jO6SC6FNcjLkc3pCH3m\ncmr+EdyFkQCbITNarV6aWbVBUqu8JNTcp2w544VDKTrTvWmU8SPsSRdayRV+\n/YQaCnrntJH+v5/BaTkwmtKH7MWhAiTWsj7ZhQQStYuNYZ2plX2SY6pcqq2v\nauuUEjYVE/5WfXiG+mCucevo+CFdwbUN6UEOtke9nfNemefqDQwYyPzN8dVG\nZymmN+aKbQYYqapE5oMZbvxvmiJh8mvLz88p8i9/K5bjJ+f7RYZjkM08F2p3\nAr7BbGy2a0SdAu1baonVZzhgqTGk0VpRv6TDohigrjnK7vkEHQIgdn+RvOHd\n7BEMJUWkyD7iyr+XdG71hVfw5nDfakrDDaDlNvrTg0suwrSSaQsP0A7TwFbs\npDC6/BNyWtR7xfjzx6JzG/sKLx/UIjGMJlHD4FIj3IRxrjwfkLF2mMs1DdBa\n9F4D2sMGeQx9wM590srMC1Md7EtdUDMO7iQwENK9S6ixl3A3s/alq7GV0qBW\niUIx4dhNWrzCfvn8lmAmAljx1WXxT3LR1BFIfYTh7G3adAma0ZdvTkidWUko\n5YjfmzM8lTyqwpYc/Lqoy0f568qG4Oyid4VGZ3SVggG5M2nvppFf6Utfh5U7\noU96ikkIafrDJFvORJSwPrliTs4lD623KnYu0vVwv4AYL5TsFHrmriswHjW4\nB8nm\r\n=iOM2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFptD9MmHcpOb1HwFEYePgMObwJLcdgpxURrChnf+XKIAiARSlgdnx+oYSvstQ/peqrKGivh+Unl7IZ6K8NsrdgOiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.f279e7fc.0_1595455223980_0.0554219283469799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.f181e3bc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zL+sBgkEDe4eVUuqyAvUmch9sLTgsTBnTz3xwhV98t5kboPmiXDm+PjEL85TrtwHPf1eON0nw3sONSvehZ41nQ==","shasum":"c6bbc67a7d1795ee75d6159ed11ba00029df4b9c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.f181e3bc.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLdxCRA9TVsSAnZWagAAtnEQAIBo1aN+UcGoiz48U5tL\nCAF3Zg6G+LeqYVvY3oCgrRPoKIDvERqSfpCsDsoDcqAW+FTgOE87HqoRPSBO\nUAquGArJMUovHeQ6AWwxQq3XFvZOX+TnfvYD7sTyBZRsBqXS4SjhIrjOCg6P\nVFliqydGzovSo1IFxRTFnNu511W8un+6ZHVcSXrQNF1U08OMvpUmdn1GoLgx\nP4X1hkt7u/5cxiTFfLuOBdsWWJRfCenhLQlT9wyha1WQac3K/qBGAWjSa8Ko\ns4yETuOyS9qPv8Waw+YFDgnWpoZnyOCqJA7V9o1cseY57b+VVV2uYbhhQl9t\nNXmub0M4/Sd/IQkPJDCq3ohD+q2mQMnKxuZVgLcPRvEL+UYs1u4hmwemNkoh\nBU3DFPC+0sCbeDi3H4cZj6vwL4Ot2oL1+6cxtaI6R0AqZIVQd/syz+sPksnB\nEKk5KW84JmI0pHiPPjqF6q8zjo/7jRpoSw6mlabVB7ckTJRToUtyLbNyehP6\nWYhNuFPuHgSooavipZLYIaVu3DdS4DYai20srHQrUUSoVtt3fI6Vbs6TuqT2\nRvPuI1GIG82ybH7MSPshKmxrD/A460SBi9E07emg6bwMt1+UbIDpP2WbLoAp\ndpFGuOTFMnXffo6wkeLmiy2dUHte3AcLzesYf4wFem/BTTb+Vetf5ro7c4z6\nT4jH\r\n=mM4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtgWUtCiA521KNSt/hIzWXKOEiIWpTKfcICmiE7w6VAAiEAiu2YVkHHZ4JkF5T58HKdiQ2ZCpjzFvQRKPeqf4CUFoo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.f181e3bc.0_1595455345100_0.3567678500042575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.346a622a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-c0yYDJTw9Tyt37rSgrz1opVcm88zrPrdmBktQM2KoDERiaFawkK5jiipreSCLT9Z0xbt2gqVmC+LBE3ysS9M5A==","shasum":"310ea25ebda2601963eb1586fde9d9cc12935871","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.346a622a.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM4+CRA9TVsSAnZWagAAOrUP/1VHnSaufk/PDsi3wgYw\nWLJpwCRgAMIkm8XHrpXGk6FnSs8NDrRgGcLsimNVbP6QpWJA+trcTjB5fVk4\nZqL+IRGtjmKDrGsAJEq2aD/vAB1XvDVKIHfNM1nEtNCUJ4uRs0rK6Pp2iKnu\nKh3+1g6OXGGhJaeLmLVr9M2c7nnZGmjglvvXitYdVU6dbDnC6f9e+Zhq8INl\nnBUlpMdP7IqGxEEz9slQ+7WFpnYZDJS/9i9gPeUj1aIVHvGWrttWQtaGQ+99\nLtBp5ubrGY60/s47DODWUDvKeZH62zZzGstX/MbdYA2JWBQJaTWhUgryfEdd\n2MnWpgwtsLJiLkc+/jrk5OHUrNbVpp6PVJgtL+RzccwEo0H2DAhmiJCYdBy2\ny+9BoZqtm7iDkm1tzMs5Olg9hB+dwdsvj5r9q86g6JdoiWkLx9SN7MY5Gx2e\neIEEmVC8+BeDLMB3GqKO8ZPge8GJ0+i3QhzCX2yDhk/ELdAi5DOYYcoghS2w\nUxAmEGhOGIT3oWEwkPGskavT8aQH5TVFyvQqNxXHeFEYvzdZqxse2ZKJ9agm\ntHMikMTSTki254MxXdI+/cFczZkbXYOF1oLxDFgy8VxaGUiStvmVoidEuj8u\nJVURxkMz+/QLlxg3adkTTdEVSl7WXPR9cT5oj/TAArCC4sJp2M1kFTiVySw+\nXe1t\r\n=nsvT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8aOSp94TGwCzh++pcLpyeZaMvXg3WDZ63taIL/vatdAiEA/9RSK9smsQ717sWKnEt3R3Cek5Q2PIg39oQbhF1DVEU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.346a622a.0_1595461182293_0.5424120077392076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.c9e8a848.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zTDD++MpNUnRqap8WYA76fvOkR+UgJ7qxP0tr/Bh68XI6GA+twwZvjXSOrMIRkuzTOeU0EKMjhBlqsfKursJTg==","shasum":"d6920f2f6612377d16d1bec0ca0ad50ffabae09a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.c9e8a848.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONsCRA9TVsSAnZWagAAx4kP/0NYsqh/X7qX7SQ+OLpZ\nomvc0u/dJzbBIVmgBnm9QKx0GpNxN7jHjYjJ4kAdkRUgYyoU71CqOS8reU8Q\nkHwOjF7w8+PWuQU/N/wiA+UQ8RNo/1/G/hbaJyjD8b4hSp/lODdIN594bfWZ\nqf7527yiwHAFQ9Z1hd5oZJ5h9rQTUraY3wW20VE9ClTgT8SGNS/zBhket/+6\nPreE1GSB8N5Lr5JUptmTZa3yBDiKun4QfQ9FWUn37g3fSEhdhzdM1Gq+JzgV\nvwUpZ070rCaZzwt5MByrn81RD5N7PakmrdQZisBM9jYOfnRth7hMN303dGba\n5tDGaxZl+muRMYGViIxyrXH0XDntdZH9JPHNpmc6B+sFmtMrNkL+0DlF1Dyw\nXZfqmlrCiLQVdairPoysrjo2/9M0dX6ce2a0gsf4bp7pXtb7NYn6Jcu4XOrb\n9ytg//uo7wqsaSr9VSTlqtcMsljTqAL0kfaxRhRR09sCrp4twA14M1SmvWzx\nwGGLx/esxSAi/l+u49yCdAN+8e4B/wf2iamk4OgT82ef/EsN2OtWMszjPL73\npBoECbtlRfv4UsNEpUElUazsjBabqDHIcq4ZvldSBDHeHHRd2Vs97FhCqGAK\nsClgyMr4HxkHmTHar8rIJR5U8LE6RWxYJNl/R9BRR24dIMmQwAH/ri0mPpRp\nyiVb\r\n=uvLU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWR4dnBtt99L8EqHkjcb7Hf9hbxjwxviQe9MY9p/4ECgIgRSoabIGXq6JXRR69Z+1XE8PKZK1ZnpBXvUubB6LBDpU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.c9e8a848.0_1595466603687_0.7364239812490003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.718c385c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-B5jjM7kAtZvzt+hHF2mbiaD9LRWZZ8MddiPgOgKxCwTtaWN043TI1CyQeN+pg7XjLianuRT9TIumamv5cNae2g==","shasum":"f18ef79a8c47d40a4e7f122eb2d3068f9a2d04d1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.718c385c.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2vCRA9TVsSAnZWagAA0RMQAJFNYg72yfb6JqCHQpDd\n+l4/nPcpzwZx2dRtvzrD++MPBwE0SJgXZ1+yvYJlsQV6dapqMZFdHPiJGjzU\nw/p9qvmHO6M5HikKh3NumfY7t51/B9gMxk8aSPlfawqVICj2eVE+frImudbz\nW+V7wJA21E/SqjGmrSlnFnXYgrGRZVzOH1GPe3g9ZZU/qhHWBU7wWnyqAV2m\nR50F1hgV5fWAwburvMKFRqKkyxLOBmFidQ8nabWmg8fhEWUvoAx0q2H1mb1q\nFAPITepOY38j2bkT9mn9g9giYQDSOqtrFH1h0TWwNtmWzWtRX1JQozENiyCj\nX04aG1mUJrUlY8WqUEDJz+Tn4jend+tFEB5KQ2X3dkBQYjYzaIniBxh3c8Rt\n5VIbMqm0RNyurrARSxXiWnOOquvGvqAueP8nyyKi/YcveUpnqMq0MhbLdzAH\nrEahIfGWilE02jq3XVXsAe/fke3lqC/X4r/Hn/BL8LPaeFC8IUi6sintoSpb\nKnjzbCVg1wWm9SrakqqvAvxtx55VWs4WAq1aNTEqibAAOW4zpWQdK2Gy/SqT\nN+8rX5GoTF/1c68FmLzaA7n/fnQqJ9ENliHWh8NG/f7tyGckT1RCfkYaenHo\nBtkmjk/BrEOuj6T054/bdPMvAsU7MA5YcCKVI5NB8crQ+XWyQA9EAhp96REM\nufLn\r\n=MgPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBi2xlDsDYq1CQ6F55AmLYedw0Rs6lF28nIfMBFfyLGyAiB9B2mSBJzAD2Z+uqEeVJWCP9wc7s/TEHB/FjYz8/LEjA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.718c385c.0_1595534766878_0.48032312063232263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.cd516a27.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BsdTmxRFA2XWqwzc8majdwqxRBRM5SGELrI4BL+VALZpW9Au6WaxrdUp+9dBL+tIIi5i3wTIUQOaYY3ZHE91KA==","shasum":"841ec4756c341837338c65e1dd153ee8ab51d6a1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.cd516a27.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIpCRA9TVsSAnZWagAAnVkQAIzkIEU+j9K14vVylrQt\nzIa1tymXdJKJpQnyUrSocK168bVanv9a5/0EGDpHTZmr/r83J+fAmeJ+w9FN\nJLCwiExHdgSjFV2jJb+5uXGFbsoOeUm1olaYcswowibvQUPGpcBp9acAcBFx\nB3Wk20kCWmEivLKsg6VjRwPaUAgisoMDTG2C8tUgYBop44BgmXMxpx/Pvsv+\nFgLt+cxAqeoycE3L+pd/JQ8FjrVLpLVOOMpM6VEdhQKsnGwn6F8N8YR+Swk4\nSMrbLEqx46ThlzFQXmbJx5DZeSfEIQFv8b0f0b2lFHKvy92zKsPTjwO4rshC\nIAzb8ptkA1iCFKSxBHfPampzhTX+2Pmnf19syi6dCI8VaOcPUo+DJyXDoWiO\npGgx/0bFff2yUY+rX/VDUDh/whFeDgGGI6NIgv6b9IvosfnBSBpbe9bZzehH\ncJ/7xZ5o7FbJELVUtM5bU/y8ZgXdnLE45IYPrRYZVmwVPC8ECXy4bxicXhkN\nihjRlCzXQ7Xuo3gtx0vCykpbFaeoz7k4enAeZL8G46eGmVRYFTa4B7wugjV+\nJ7ttRysvIRtKUywiO/zvU1dkVRQ+RB3ON7UVAavfUg8EBEynhhdgS/KwwHBf\nUZsz1QzaL4QzHrLCIFLKMfXvjlSQxWgRLAhUWIi1pDK632917VxpG1Pdje/d\nB0Ko\r\n=tiFK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtPwkEr5Szbx8uFnxLBOlTn00Yww733HJwBGZ9b4gyjAiEAyfYwHZMPtZwBq/XErMW7hSEmfORQzafDluAJ8XOVaYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.cd516a27.0_1595617833410_0.17975294998331193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.1f082191.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-055UzV8k8Q0KOZ8DsyNsqjdg5pW7ua3OzQ+v3JhBCl+Q+alV1HyDi14n26KkHXEfTXANNDjD9bDjnwHcZMerkQ==","shasum":"2be7398aee6047a62b99ce0734dba0531704e6c6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.1f082191.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNnCRA9TVsSAnZWagAAC0YP/3Kz05Nl9ITr21cLNBZ+\nCnPqyAau+CBWYoIhunJXNY6v053Fg40NfA9zO8iZLueFPBFKrHzj0elhbRT3\nDvaO2ksNvUt9jTWVISFVD4PFymXSDJpTbNAMbes92oClf9UQQ02RsYsm5yjl\n5RkUZxEoSn7qn1UOkIGYsnud+itqLWqqgWKqp6DCgex3ucib2tO6Jm7PxuwX\nI1RzDcRCMUTRJ53h9e+FxAQXumrVgwRm+ojmod0foHb8/Vxd2DXrkFijfB78\nH57FMgy2oQCYPTmlqOUDS4G0ZhTxNGkTVPPqAclYq6HCBqx54D2+ZIwPlFWK\npa+88GoaqIhp5wBSGP7kI5b6Co1teesbQsk1wS5xtsBp3b6X2mGj1sbm04PN\nSblE8PktJJhfJn76UL6iNhgGFQVtuXXfpaRoGEzgEgwxt7w5/DL9oRp+hZV7\nC+6pcD6O0J/Pcen311dwp0Mikge/uIu0C3cFbTcz1zgXfBDpCq7wkxJ7aMav\nMDBhFw+MjqNw50M8fd5J7FwL7vcIvBZ9UPP8vYzdb0zPVYjeH3a/ATAu7UEs\n5aUy1qwAGpSNbDE3uhOAiIPvvPKrF0y3qUnqec0LQ1bXTRTRPAomBYlbI/dI\neTwcg4ymeyK0SOB8dK7noNhI216fC2YzUncSfZ32bbl8J5pF1xgsMSsEOtNA\n6Dde\r\n=jgzP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1xIZT3/p9/S/fDY9W+KoK2mz/PCoEzZQabP+CfoLTUAiADsLSvCg4wwHnwKE/z4eLbXBW8rl1meoaTU8WanztyKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.1f082191.0_1595618151328_0.2687941688570177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UogM+GSjsTJFjPuKqEtmNOHt9iMsedqbgytWw1IVlH6QidlB6aHBqRHJZXqciGapABQfVjNWwgTqv7dqYYPThg==","shasum":"8d47fff7005de57ee0e9bbb417dc84e76365a8cc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.ea3e82dc.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzShCRA9TVsSAnZWagAA6WsP/1AzTttmec/Mx5gyp3JH\nwOvtf8QZK8yQh4bpM5MKewZd4gtIq2X4cJTPke/5yhEQKxQ0lZe5FPfbQ9Wa\nHL2+QgPy2FUcdQq0/QTH6IOAmwDs7z+PIstxd6X8IKZ5NU+G91samKXKqloL\nLYR/7I/+TaJjrnBrv3piHo6hbGviYIIt3aCUVpF0gJUHHl3SwZM8WGjWl08o\nrFjPWQ8YY2HtQmSvDvQvtSuzeZXzhMEk7VzYN+bZeGz6Qd3EXFL69J469s3U\nyWOMBk0BmUOwymQ1mgiDVmqJvc6z7UVfZ2LnFQ2by0OmawpQsPLdpp/lZqCW\nfRgSIrPYHdYT3mAg6Q7+Px12etIJoKlGUD4kRGfWEuXU88m+MiTe+38RBJuy\nfjCHFAF5pREGHD7bDANkZTi67K7a9k62hb5Gdk9gaik3k++KPU1wJP/ViBaF\nEF/thznwC7s3p/6zcLQ7GVDuIByVuTIVVRbljT4xMW0mA6WgUECBPA7XGXvC\n3vnWUB1tdoQ9pNTaev6kAGDxzIl8df7nu1q/fVStBHkjfINFL9QYx5GwlG2N\nJAv+A/pZk23eCNoSSqNij4ZiXJ2b1inKLPBVLWVmhLzrvczTeYJNCGdysscm\nHbVp4pMq5P7aMJHqyHMZzRhdhNNQPVEiMkTpsezuOtoRszpfvH3JetGMlUBR\nNeKe\r\n=PshX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi5ZtdWlcJtq5mfr1SJoc8hr0PRTzVWXyD9Cr/sHUB5wIhAMEnjI3MFw0YCIPtL9f+Ucb2Vli5OoCwDhRHUs37jydc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.ea3e82dc.0_1595618464779_0.026686479174955702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.94987b64.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/ripple":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LHHijua7K6KV55XROzEzC7LFrUENniLIZ7bU/02UXZzHIta4K1oAhvmsyTw2KtHPgJ0WKcKRr07Nk3UWPlnj9A==","shasum":"a8e4c5e868a817e2e0a3d4e0a69e6e5c16a4cff9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.94987b64.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PpCRA9TVsSAnZWagAA+qUP/32FCrNPTNzrEAvCEYvp\niXLsRRfaGLkUwt+PMsVn14iWBZbxVw3QEzUedtWP17Sddr8jtCSGt8ntHcwL\nH5zYivnQXmR18JbUXQqcBFsGQkumH9l1+lfzi4GUOAf0OZpPYogmkRncAG4H\nsmcRRaMsTO98VHRedSr/b+2/vtMbHmVBwE9lK+T+BTxj3ieLZXJBEiSjNSy2\nJ6b/XvnOOlpf6J8G5ptiPqqd1xtpl3SGw352t0n/2wV+GMWxYwxHTwIqJvDn\n0DnvQu5vZx4hKS5t9Ws87k2gbfCo5mcMUQkeCfFZaVl6VoDmCQsuH+dXL4zv\n1w1tyL/XLIWwH2qAHU6eVH5OeT9Dn8FbVO9xLc2HT5a77QmfO9fu/0r9skb2\nJZ7D8EPX6vcHgudHLmoH52K7BURlIAVbKusFRR+ZnDYkKt1GmsMJ9bc30YnK\nja1aSf2/31ebE79mONlgQ3AiYrsmU3/p0xD/8/uyIwvF+T3yBb+ZGR+ErCHB\n+F7oE44YeMUSt1LFxMP3cIQsibLKz32QPsHuFRquOMAjGA884q50+JjqzJrZ\nlabzkHLHQzkxlxRteoKHRvHQiIEvhssyaGYq+fwYzAnQrbTOHBQG81QT+fWy\ngiCZN2DN3sGvw3WIWPMNzi8fbeVQDFOdF2q89LrLUYLBh8DLFcx5Vuz4Px7M\nfhRt\r\n=Z4C7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpcGw7o/tDDnP13e8cVqDo2LXLjBtyXZXEN7EXmJZi6AIgI+y4nKnAnvrhvuS5zL9X2fEELvR0qUwf7zLhiYEckhw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.94987b64.0_1595622376644_0.38474520841639936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Iz+/evS3SLjAH2sbEbKPK+jbM3pwrwq46I7hEbJV7S0mgH9r0lwYfUG1hZrDwra1BsbgdTxPt2q/Fu3P9uCPAQ==","shasum":"8d6ce359f1f0156ab13aebb73d6d9df6f0824378","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.ff49b7e2.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVCCRA9TVsSAnZWagAA1Q8P/1Uv7/gBGTXA4LC1ZbqK\n4gBHB+XVmSv1xSFqHXrhldmuoGjpgVyifrIS86U5zsLdLiJbAXy75IUJ+7zy\nzxW7YtJo7s9EQfa381M3MYG9nl1MZcdR1zAGp07j11gej/KeIXnU+cPCoW/o\nReS0+o1FOGc5UUjKuxh8T80hsYXRF2Mkwax2N0x26JhpXk2EgT4ZceE26bwC\nFt9s+miY1K3TCDQqklyfqy6+t9aSwibOff8Mj085+ymKk1Cpq124cVHHTc6K\nHeshtqFT5EqZF1OOP9ouTDKO8btDyOXaqTJwtJZNZqpta+yxNSWbxY+Vwo4q\nJUSZgevlqRrY5AJUhkWAbjV0ysENbhqvnVJmZ52hrwuAiWmQUaxEGVB16gq2\n39kqwLud3ZX2pH2dgrgBpvFQBFZq+d6fRu9YMn/uM3NR4S7EOKtjLxU4iNRX\nkjqaO1Lt4gUgMGVAVNFcrQAtf6IPirEBzqFA1c+pUKNYbmjoUIFK/Ww2eBrP\nG5J0wUZ2O4YfMQaj1lVjWokCOM5lT8FPSxfNGSfGkZf1A7cmVjiXVrpCpVSa\nOT7NK17p9Tk0ZJhRiklPszYdBbbquLVbaYYccWdUFMxQR2JFvUGgL/EpgGDQ\naVSYARkVTSl77jOdfe297NXaHAksDs0rS/7LyuyfZMvT59xeIGXMV/jS07dE\nqPA4\r\n=WXZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBO98PABh8z0IzKR4h8v7FtuIJ2I0LKnmwoE5rwm//CuAiEA8scKnun7V7TV8lELU/XMYEf0C4bgg79kO5qcGgSpNzc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.ff49b7e2.0_1595876673733_0.7892934433782404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.3d334ccc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TkriFe95cyE7SEIGS0Qvuq80rK9QwY7Pis52bNjX7rMZsp332E/kVTkSDfmZUBB0p0cVPfh6sPVmvL3xrREelA==","shasum":"26a83de7dfa8e38d05da76ed0496d4540c89aa2d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.3d334ccc.0.tgz","fileCount":32,"unpackedSize":114505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE77CRA9TVsSAnZWagAABZYP/RfZ1e0PRJ90LOwBPfWt\nxJ8tS8b1T/I1Pt5k8N4dA8dGGQM91cDsbIcvhD4Nt7h5SNjglvj2Udp+Yc+T\nleqlFoOG489aQijSA0/k7oWHTN8I0HYpxq4hfmkL7WClIQBdJytN0BvFEX1F\neGWNBcHnE391gxHxmDahjna7qwRYSqV7F8n7NvjmVuF4Egzmqij1dwHFvd1T\nrKBnxlGdZEBxxNjFCD/ha/Ll3qR1YNXa3/8ZmHFt5iZD/dWbw4GvwdUNoGOi\n2pCCAyrJEe2dPzwLk7YQI5yYCxMgfvDOYavUG8DbF/RZbwvLjDdFojSSedKX\nbskTI2/0NibhzaCVrvX+EERi4KgCi1Lv3UXhi2ApEMnvFZQWawMi6/OBjbsN\nTM/FxpdQvH9w6UH7KBvSND6OIEyjhNSpu51iLRiBKVIJDkwW6fOwHpqfzKMu\nBkOmFw9nAtNa//85uVZhPsgU7g5STWXOzMqsMAu5EKydza3MDcoW+Mm1zjMk\nyQxbOi8Ib4p1EOG84YhR2gi8ZB14y/C3va/VNSmp/+zScgdZP4d1HGkgDal5\nGPvteP4MVFib9leh4TZu6Ch+MsUQlBBys/roYPwFebp8muBQVwZjGaYihedV\njeKP8EgGqMUSmgbWHrTMIkZRWcBFgH029BxV5zIAvObKLJlAHO428ZrWsFja\nVPPj\r\n=4W7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrhGD1wjiDipcPMmecvmJdDKuGkt/5A4iNoCZE/0STSAIgdPK5VV+PexRpwhq+QDraUx/x4FUtWmaZBFWFSKXB2Pk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.3d334ccc.0_1595952890637_0.34640372255678864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.82ac569e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4qYMekWJYKytlBvNYWhnNWpXwx1z+X29JQKUnH/7CXSDY7Nu5HYyWPT8ap1pHEl52KFuLmt8HD6PzzTqiQBkhg==","shasum":"bd781c3f35713dffae0a6f828e69bf57e324d976","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.82ac569e.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGCCRA9TVsSAnZWagAA5ioQAKRvj9RIHddq+xDgT85z\nAwGbXSWmq1hp0CQ6Q7lXIyHDYT3F4vzhISVxkcf75pgEEwJOfEzAftFX49h/\n+ed4ZOZtxTevK5rihTUsiqTMuCMRckFzDG3uRaarDnPRYbwGiQnL9j1hNQQg\n/6ReNlGLuo7gYaHNamZ5kcQh/X13JM3a+KqdMgMxyhVil5XrdRdj8VZiHlx1\nixeWcxME3lcH0XC4V9Moxb3zyI68U3LzxpC8wCYN4R3xRyNoiiYsq+5/xmcy\n1y2ze1N1QMdPcIRJ87+U8XLAYHVTFi8vplbXwrbzB8OHgZo1GuMVSq9AfEF+\ni4ZGdwcXclKvlrVn7C3gSLDReYfVlpdlxtgJ2OboytKx+kp7WJzlAUJq3MOm\nYJhm8mmo7egIIv9hxlUeYuBpo3+Zd3D6Evde3qm/h3t2wHfvf2eQM+Zrcnx9\n7ORLdF5jieavYd+bPAmKaeemedbvuk8HoPhq1UU6ERA85DJYvnbzzzas5og8\nJPuJ8DOVRjpeI6y0Sc1XRo8R8dARIHVJD7Zv10l4Qa05AYZnzGelXEP89bIj\nYtnpQMn5hl/7uTwv8llowX4lX1VH76P/47YhJq0K3ENEB3WhIc+ZfLbaOLwg\nXGzef0Zpo45Qj5eOHLPyQcfzvh29yRd3/JYVXGWUeAdlHryCLfGamRSRWcCF\nTQZC\r\n=pOlB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0pCi843pF9Pa7KxzaMlXQgqjCZp2nvZtUpzBQuVjEHgIhAJOkU1K70ekV5fhkd/ifc60qd7zcgQvaR7RfHH2nVLGS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.82ac569e.0_1595961729577_0.5948299949743512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.99df7397.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FTPir/k3rFoUGuPWBov88jzXsTDak8/rhzMbcNsjHOUrYCki5eTiT1zROy8IVcHbih+vEBh5PPQk+urHiO/z8Q==","shasum":"1b22145da1a63664ecb3e1298cd3ad14486adefe","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.99df7397.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGMCRA9TVsSAnZWagAAGGwQAJ77oVY05uIFog1DJrAH\n5bNJBN7fFmSHqfbuaNQgqNNCoPcHNvVVqbAkZp8IxDopCHKQcMtJz9aXsCvV\n2tPP18ON08tOlGC+AH447BcN1sbMyjQujzM6Lf6i/v5s/I8rj9SgiDB6Jda+\nfQ77j0F4tojw7Yepm95AohM/m6+a2tGzS5R62zUcDX3lyMNTgJdK6LXYhwlK\n0q5sqA8B2sQAgMO6eXCsFuBHdfEa/QV1y6h6K9yesWYs+Ipe4OE3Kv+0Z3/X\nzx3M99J6k+U6mP0WFBt6o4gfZ/W8vFnO/yXUNK4Ik2nqZg2LarT+dsspjP89\nc6QXwHX/qfyJzp6/NqvqggapwfTKsPJqoY7AIuDKNZwa0T4bRsMG/bcXpnuL\nG+LL1tYthuprge4YbgwQWuhfks7BvB4ibmStVBP7bGNzfYM+p+HpBkop4C4j\nuvfqcjGx2A9V66cBaq5it/DBkrZLJtR1M20Ce2eHOy+T8oP3EryQRB0pOj4q\nX68dMFiMBxK8f3e2sUzsDdZOxEUZ8ogz7K70NvjBaDL22wSURCz1+GxIoDEP\nt13WAv1EWg+8OQqn+QaSRpv1hfYny4Jc7SMHf67clio/v8cJOJ//AkUI4e1K\nvRjM22JWe7TIg1x8+DyGgOzLVNGs8aNRgWab2gsfJXxvGm9nwb4SAdSw2/fW\nzmYK\r\n=LB1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD27IgNMmugqRTiRAZ7CGCvROhKu1j8iuXOxS9wU8It0gIhAPbqbx6ggeDKYCxD3QIW00IaKfqZCUIfNJGP4YmAD/TH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.99df7397.0_1595990411681_0.33780796052379114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.45493e05.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-w+aneRyZtqjFTgJkTbGSfDxdMHFugRD3AvvUIYdxO0N4EklKS7uZ+hluN+vgWejonZD0ivXi4xu1+er/oMh1xw==","shasum":"a610d6f535b1c10791fe80d1ecd2a64fb95a4cb5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.45493e05.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7lCRA9TVsSAnZWagAArl0P/3eBQRFLhCtgEeh2lQ+v\nTH2xpXNqBDTn0i7Ttk4j+0JO+r+GTvLZfTUhetf0XcFrwpqSusRmDS8MNqFC\n3VVQRokxK+Pg2UNZUqxfaOuiCSMz0O3EnV/hzCIGZMTlOsp4DH0kO06tqi38\nsXwCf2YYSmZCjImFjBYb8T2alOFvE/P8K4OoCGTzr0p019+mex6f0C/DwbXI\n28JoE4iLOiTy/h25JpLIOXghzWIjaBG7ll9JqFDDk5JPBUkeTbw0tEjDMwIk\n3XsW0fG8z/diQkPJy5PoESfOPpTcf59UhEw0gl7iI/jyG/lxZLfeDXT980SC\naG6YBk+4WG+EomRduKOWpG6BskcCYahfA3mLSVK0tggl2a2cGz78Ygox8Oi8\nZG0egWeHsliLWyEoraPPKZ+jnNKHGlRUauKEDuQux6mOJ4Ag9rpRNqCUbMI4\n0syluXnKM8lSZIfb9Pm16UeiBCTD6kr82lQx6rdcc7mKXbU17jUhcXAw82aA\ni4f3zFcNmQFuk9IlseVfHNLk25Pc5DE0FMLvY6JzsyDeW4/LvvWy3GVgIymr\nEdEwZc05S2AZVvgMtUc24VemLAlb4GqFZcppnVCUeGqSzLY/wyIwbd782Gqv\nbQ+4gD+vfdnxMG0yKzVQOhj7jDLF0R3cGt7prXM9FsQErUfrmD6JurTgXWZ5\ntWPq\r\n=tz0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTTbRkzTM8PsxtYeW9JLQPyR5GEAyzWbHAMVIQtG798AiEAyhT42zS81i4v/R2QDItKjsr1ucmm86SVZg9rXL5atoY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.45493e05.0_1596042980881_0.4803457335800574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YH/v3xUITYqqSmka6GFsnMAYf0k3acKq1i1LLzNsekFPOD3E9Eq3syJIc9pC4GqURQSRm8RTIueUTWgBrai78Q==","shasum":"7fd5e23077a79a372f559eb7a1a8ee30ed23e1c0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.f2ab0a95.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAACRA9TVsSAnZWagAAQX0P/iQP209oCLDTK1DnMOqt\nfHk+tl18o51PDIBKM88ipHltJZj23O5tHEUBnU/tTOrTALXcTFrGXFsNK4Nk\nHZv4HCKSv6nhdbSBxYxKd8sfz5WvBj4TIeruuYK7o14WnNfw7/ON6TZCB8LZ\ntWniq4ukG58rQ4rcKQEZzTsaHFPOLOAsQdEkwwafc2MieUUrjDfC5mgZu1uq\nR9ZXf2kpjywsR7nA+GAevdZJTwmyPFSaFfNAMnnwPyMveMccNLcS1dYMCHSD\ntPrrlrYF9QoGbsjJSYIoXXMUzj/MwiuvHaOYzwmLc8bp2t1JoVDm9+Zv6YhA\n/p+RVrVK1m7a//jGThfygBXpfMhjY+5k4meu3JdLhN3qvaMuoq/zmZX/OkjT\nHzB02Jxu0bAV2OLzly95E7dVRsVIR7C9HxPAI/MP07CWJbDcszc74eNSjsCG\n/rAu0CwPb+aBPDj53gyvaQ9fHHeobnB1vUGIxWbj/OsyUiNIkZ0qhF2/uFiy\nWXN/VjyK84CZyVl2s1R4/5kKrw18XZSWoQBn52jFFnb2onrS/zlyPBhg5Vf6\nYoyYglzhAglGuhEhmMvgbW95hwycpM0GSl3omiPSZpPD8CpRRZXjPyTa/Xbq\nBf7spVLDuk/adREXvmZbA3zugJ3mEBpYrz7+dlaRDpMUrmeX08qZA5uc1MmS\n1I68\r\n=+zUr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOaebFgKV8w+Y9cqDmE63vTIMk7q835AtfM2MOd4n7WAiEAlXhi229ZJAxSkogZqmLERrcLKvR+sLujXuTrxC8bmu0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.f2ab0a95.0_1596043264125_0.028430737273928086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.45f9eddc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MPyMAKooUgcIil3c6wQpkU+zlyem8wt0w8syWWu6+5uIgIa6lmzOxNHxxmTJFnolw2pTcZWIRlcZZ7rYjPRK7Q==","shasum":"fe03ba9d16b1ac1905db5c2eeb55ff03ce6ef7c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.45f9eddc.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpMCRA9TVsSAnZWagAAWS4P/27ALam4X+yhO9DBGm4y\n+ceOiNiDHUtTdM+k1rEFJ0MB7b57SrCKtYuYG5nxCgAhxruEywUZ7uFwbuya\nNc4fqM+oTlTGPn1nMAmrSdC23EmfUyT4v0YSMOFclsfWKPhwt/M8F0CTWPPE\nnyy4NcPIJiTtJhhD6xJnbzWgvKxLMYSirbwi0VoYhPRPTeiXXBJWhA+O9MP/\nGsLbdujAlMHFALVhYR8x7dOHo746EF8cUBYiDmV/F03vaCX6r9BWezL2Lbrv\nsqdEvEYW1Gywe7PCoFxhuaDvK1f1nHdpibV4sskPz8Zy+bIaC37utOs7gYSN\nDA4Y0r+T4U/S5WUpynsaybG2RzeRKO/6ZV45GxqTVFQRD82A765xaMDbsJkw\ngVgqHqoncl84x35Hn614t0JrLCjGN+NeDeB83ZTZX0DtN17tkPWr0K2tcIr4\n0scuFpVjB6LxiFJxH5UiEedwCwTqz5K6bmiyYxIb3NACjsoBk96UAeuPd2x3\nAkiXiJYa7vuM63USdkscH6BJmHYP58ouexS3zuF0yApNqvlX/yr/G6xlsg0c\nPq998kt6BdM4Tfe7zIUGqjvC99Vo0ViwFivarKAITSOKSKp67E5SD693qKfb\nCOhRf2yE05naecTeDQugvVtQsLoOmKDXBShQswjeFJd2gHfjtUIP/u5FVjtU\nA6Ap\r\n=brY4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEB2mPPHUKSRpx8Sc/JZOs/aI4w0b6EllqnErao9BugQIhAJ3wWe4VYRuuAxe60a1uEfNCYIv4hfmDc4SQu1H/ytJT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.45f9eddc.0_1596070476233_0.4211259719851226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.b64663ea.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QeYm2T7Q/jRG4D1YTewmkC+WEq2OC9JhaAAHJfWdNtQjastGbVh/SRCd9yHW1KA19CbsnIFsjxFuti4WmAyXpg==","shasum":"2a88208c33508cd6a9e23eea3279c08a3f0bfe96","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.b64663ea.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwahCRA9TVsSAnZWagAAlwQP/2Vbc4AZ6rApGzjtBFKs\nVW5So6SezxGIDg2hZxZlSo208k+n7Oz5TtXs+8qLDKuSQCnEZPyC6vD4072j\nSoW/apu5AcAqy7PCmL0PxV1Xuan1siRzcIf25pPHVeD22l4ZVZkO5RVJxw63\nLbgGvVGdVZSMIKdP/BH8edqmow9wEXoTe4g8IFVDLuxQVsgnxsSYhsTx0n+D\nf5YzPZetXaf/PCUVe82brwF0v6nLBO4vWEHW9GofEkJLuW8BTan0gbK2/SMa\nCSR/2bL+TbCcQwUlimuHJQznBmR2l34RZ3Wiqdduhn2md1TQB8cD+jUsnmTm\nA6bSijjh2xR04FFFernZdrbc9qBNhCgz8M5ywOXUsaoOP5auJg5xIG17YZWS\nx3f4c62hkr3Jn0MHBKTR9hDGSkYU4w60LPqoOARniwT0cRfdj6tOpegXqAPk\neq23h6Tw/2a3tMtC93ybpIyunkamNPlo1I31Vg03sRfndTAPZV1RCfHabECg\n413kkzMBQ8/HIjXu3Bjs3QldRua3fu3GQO6IO9xTOVABM9n4glNB7cmWYipr\nAcnXSMOvcFhLlNmGo+15hXDAf4ls6eE78EghhAmsBFpp31v6uEt3/JmLMs5I\nhJP1ALwafdVJx1JCltd/0KJkpHhW+NwNQN5Kbrp9oXaVAxOhFUWIihwx4shX\nJfpC\r\n=D7Kr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyBDQ5/Tk3m6ajbFeaQ4+Tqw2B6SzGIWl0j7awBcIwQgIhAJhqrTB4dYGlDFTvC3pwBBpFt1Bw+NAqSG2u2Uutg6RR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.b64663ea.0_1596130977239_0.42279881093751714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NfwFGdcYOzyDPVYFPhqKr4K/HuunNwDwhMywHpqylY58s9rUMBTyPHLO242isjHzkx6RoIPfSS8Uc1pqekWzrA==","shasum":"30dbcc8428a74142c2ce5c723491fd339fb1e291","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzW5CRA9TVsSAnZWagAA/QwP/j5rX5YBG2Jg4oXDzB/w\nb86a91GbW+wYsvrGCn1qTvu+rS8p/xHyuPJriOe7KHf+pcfUZS72tcUCBQmx\n/9P6XUnIKLTUb/Ie/tg1ROlBgrkDFR7KWNKZXfuGb+GImSDIHxU6CH5yENBn\nAh5RvtJzfX9LspTvAeonWy9rHaRujaZ1gk1wVsxbn8/6ayMMQ1p6BX5UEMO8\nvV5/zP7PCm1WD8gOrOgLOdQWRTpXkO8ZmbxLZeaR8hCbRV9NqGdGO8xTiPds\nqGsUwZ/vIaGKuVgKL8p+Hr08OA8PJxV5kyFZhWf0mZS66HNk/w06ASQKpEAE\nuBUJM7LHF2w3oG3DC2uc7LDHv4kzvfz/Pz1bCEfu7KYu6Qn3RRhylLMwDs5y\nv3oI2+tV24M6tafpNlO4aj2aEvnV3+3DkmbfDT18oyz906PGZdNaW68o3voj\nciM9sUsxmmEzsGMVYyxTjMQH/KfLQibzX9E/NZz4/fjkWzteHHLvCfVdJC+O\nSRovBXjSI5OH6rxkiAoFCVmPFcvWqNzgH6C+Fb6bUxo+Re1pAsa4v5nX4jEI\n2v2l35Vos3dkEA27YbgRC2o2zZ2fafsAdsRdsamffNwvqdIuaAIbnEGUkr8V\ns3iuQriy9G9BubX7whsEzCvJfU5fQHgSG2JvborN7irOr0rcZG24YvszjhLW\nCn4m\r\n=qKRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBNeVLEqm+HipTxzL7cv867oSRr8fOKBBgo8A+DCtAQgIgTYwD36SD8cG8Ih5dI0SZJYIO1RZRNjoKcmC5NmDmp60="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.9a1a4d2d.0_1596143032516_0.37345114932339385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.887c2848.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kOnjIkPLWjp7EyS61p9P4AfTJUYCSzbLEgzNTP8QHoJrhx/eC2MXO1JM+QNpivasObcC7E3cg5iacAdslUm7sQ==","shasum":"ec31d593bf3f0858a79c6e52f0ef1e9bf75599f9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.887c2848.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QfCRA9TVsSAnZWagAAw/4QAJ3cSYRsz27lgMjvTOXb\nu6BVMw8yLKCdpznIXRNHUXFoyScEi2rbl4G2gLTv+uwrMq2CdcHUe5JBgDMw\nQOVyQYL9iHJs1ReVoGiZeudPOGiTVu6XPwMJ19piV8OXi+uuBF+NcqxWN8xB\ntFo0BGSCBWolNU0ZaNRT6y8gnlrkSRT4Q2kLP/X8iVkqlMR5awSYSI+5C209\n9t3TzkbLFVI2pGl2Ad9TU0YlBA1e9ZSNHHuiN6AJ5S5e578fKsGJOntjYNu9\nXmcFWiZcFpVP5bXbaDrJNy7GHssLz3cLxGaqLKhU/NbSjuhGZk8wp4VoaJit\nIUnGgRxrPZNoDH2NWnnyKzpWssN8ndXjSuriANSOQZDnhz5ztd+Kdo6m3UB6\nVNfZhv1pPKTh48csrBLvJ1QZtE3hgmoLe2kAV/6t2yPO3ocCYszok/wYCYxx\nPZf+qBrzxEslwhmjd1Q9+e+MddahEk4o51K+EMD68q/xgCC2tu6DyAgfsVQs\n48dQx1aH0XhZ8b+N5Pno6pl2/lKBFLmhI0hxMw8ZFEmbWGw5DaLdS2uEu9tW\naO0c/xhq/Y71AgrT1JfPlqqRMUjRB+ki5hRQxajODWQkzKmIIFkATK4GoOb6\nc0chkO9+rOfMqUWuqPckV8FxIOdNZ5IMzFIq7VLdGis9NvhUZIVYnRds82zX\nUllY\r\n=aAPd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbLs666PPTodrtuXw4Jggl2LjPufM//a8tgUkswLnhtAiEArZzTGtYOvlnzRWo8dMhKYsj9Um+c5DsaRI+Op7RJIIA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.887c2848.0_1596146718757_0.27610037450590696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.354eb695.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-60MrGNyr6Y9w3v0L8HQ2XnLkHDDdVrOzsjO1iA14U+5FmwNrtLfcvtv5zqJIr3p6G47V33cKYTUqT4ZvEeFQYw==","shasum":"cac6c12ced6761a12589f92b04964cbe340e3fd8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.354eb695.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15tCRA9TVsSAnZWagAAaw0P/3VZOlupMoCiHCkgnFJO\ng1/cfKGPK20VvXAYulEUMmnKOWWYOGJjO+mK4Eaisg0sGxuB4TtfFItnVhFw\nkI/OOUrdBIYrrlP87on8UVK4AMNR3/OSROc2VhtPHChDoyubbbfTkx/eniJv\nCANMp9quAn4g8/VHyHO/4NHFXML9bC37RcphckMjHO1Tt5MZThGjSpOmxD1R\nPXSXuJA/U82Bvo2nUdXLCm+gCA8wzvfWT3PF68oklYQa2x5C0XHELx4OIibc\nKWmoMuk0R61Ha7WBh5uTXVptCL4Owc7q30DuNUSQy/cE7k9X1aNiYMV/CtjI\nRtym4Dh0H5QCe/JPQmg/aTOrHmBsJ/rFTjt9WIeZK4TmLHsroRTH7Jcj7n9H\nfUIS7yAaWK/sdBc1mkgLZTqAjqseYi24aveWCehhFthmm6TEKamQ6WTtyWEw\n5lj0+Ub2aA0XLM1O+00P9a4/BZBAA6AFxMAKr5nHIjduR9KWOlRLPFUIrTYn\ny7QItTP15B4NpajUqVvOeHGEZjt9U2Hk15FKtuJBSTAL6ytcx+4x+P9a22+Q\nb+XFz9wST4YMQlzb6znwzkpXr7Z/xybuUTCZABOGaRszdoXj4bDIVmEqEzTL\niypvGAbxUp39iwQ2KK8p/uD+DmNk/1PXNWmeoCBG2pDoWcz4k52onPmXmRCs\nhtrc\r\n=6SZU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKIONtzOxXco6onTHrnWjWHZUhu6hpZHobDf7Kywo0TgIgVBgPu34MuM6UPF6xwzK4Sdh6gumVesH7Pa7j279yHWM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.354eb695.0_1596153453349_0.307454595133698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.7beb236c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SbU80Ucz2X9flufe18SqdKllm+8SQmF+sjkNuUXPvQ26MzD50FtGHNprsROs/FR0VmFnl+1vXX7HIjRbu0v1Pw==","shasum":"2bf0a4026431d27bc2c363f34e57c4faf0c0f8c8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.7beb236c.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFd9CRA9TVsSAnZWagAAXMUQAKBG80YHuD7QKsOV1E8x\ngM+zKQBDGSX8GZf+mXRtuU4egC3NNkrQMEwcpSBUY1sw3h+sJaTdkkx4nm/x\nCzAi8BkuIN1XbQhxDb91r8obleWeLRN2VJGCY/E+VJLsQgf6mHwDAIp5/iZN\nNZ5IVzGgmZjKBjbPZ/h38lmieJmakIJjFUfEfDqcxRF3LL59duZ43i4qSVul\ni99u7i5VdYhDPUk7NOymJ4mPlN6FJrW1f3e6vIsYGjQ5A2NDpP1Vdz95lqSo\nV2VEbbL+I5PT9hUM7+4wIXJhd5G33YEdahLWRj4SjXAd1KLG38HaCpbXhLTU\nnAohxhMfit100+8MqdUl8ShsvOY0ajFRRJE4q6D4uZ8inzsckl4pV3LSrmEI\nQZp4O6IREV2ELr2zDniRIbmLagjX1BOAYTP9ouphbbi9hBwRyM5Ld/qm3mev\nyUg3ukupJbDjQJrw8/lr5XM42LhYNShoq+jg6/YlSJUBEagAVmYDFBwa/OuC\npccvZltKnRsXbLYM7n2+hkl5L7PgXjIqwV4M2qVIdZKjXtGKN6TPdY24nCJ/\nTxQyjY/2fgcxiywSFhOU4HtTX560uPVk8tcG9rD0zj7fnxaGxbQaefwTxZSo\nPNsHrfMc+nfxVGWWZcsYsyFC064wqjOg0DTvAPezO+/T04aC6Z5XO/a6wceb\nnwm/\r\n=TbcB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCUfX0cUHIxU9U02pxOQLRPrhXPJvL+zJfFiPMoHo9XAiA8L+3uPaKmE3bqmOFfcWS/bIfpkd9NVyedefYInzR55A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.7beb236c.0_1596217213227_0.08248792367041213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.c44acc0c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7U8Y+UMdmAmJOABi3oQQ9CtX3hdxeqpgDeWuVMGCJ5X5poU4V0+/Iyyk2hcOAchVNN5LIoZkn3cfnSDhnNLXTg==","shasum":"5be82e9f417586180b86f51b856febbf92deeed3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.c44acc0c.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjWCRA9TVsSAnZWagAA4SYP/2LHsEe189cxHylBVk1W\nGvuMok1UOx3h4a8lzo84t2aklb014ftxRPNhGtxgoDN+TMRXwTGNETTMuNQl\nbFXF3q5wm4oA4lNnKm0umYov6M4XHHEy8VGHVBWVIhIQp4i3NyVO65L3IPVP\nSQTuimvmQFDFoz4/N4ir49IzgulKfn8J+5gLaD8Vlnl9OJ0VwXDR85bVEMib\nAQoCNdAPCS3s086TM1EpXi2S+rfhazq1K2cyw0AFOXuSsf/MlKKq85U5sVMC\n90d7cV0eCSpqllTwuQ2RLcTE1CZf2vY6OxVhsn9xky633qMKJvwws7qPn992\nJP7qn0Q4NmV+2OkUCF5c6AGSte70REnoOuavoiPr3expDb2e8lbq0o9tj1OY\nS5mfMk7Eqom0kNRban+TPiu+miC5+PT098wUiuw0wnQ8fzKb+9l61qSbKCr4\n2BJMRwyobqYIUdxg2eXTkChUqtbskudnzh/jw3NlCgnTB6T9YmNAaTmSXUsD\nNAk1i7af6igUjYXi+huwwi+kdMIdsF9wu8mkmk3Bg1TaoHdmSxOVn1/Sz5W1\nzxr6iPPk0rtdBwUle9qJEn11QIZ43moAQ4s2SoxdHjtRScBIoHW8Yks1nhbE\nt6qHAg0wQQ+McqUOMtkF8V9mgocqkcfHeTFmjPUXZeFzgw2lizLwuf+94POs\ngu66\r\n=GpYG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfT4V68Lsc5Rd3NcG0hYpuPRUFEfBbA4SnGmxxfxzhyAIhAKUK3VRQ5CkdyqdTK3gXYSUqSzXHq5ct1iSh4kz6EaH2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.c44acc0c.0_1596229845837_0.03365769948343922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.779853ff.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xRlZy3nXP9Q4C3vSMWlmPrRT5ZNuDSEFS02ifwf0MYovHBn2GOitU6dpY90YnxINAG2q7cxsecC5lFnpsnTrEw==","shasum":"cd662d66c2532825e6f5c1e5518bef5adad6aa61","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.779853ff.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEfvCRA9TVsSAnZWagAAx6kP/0vBErvheuc6EWBKUeJy\nIBvsqYHXhrIN+oQxJTpXxHueykQZtJ6SUZgXzwwkqexPMaNFWZBdz28su2Rz\nZzXqxlQVhSak0RcQ3/bQNT+lxe9VsLEoJ3poKDdr3e+xeL7ONPvh8tJG9N6v\noCjuwYDFDjL0klOu/TiaXqiMimUhyxG5ZiF6/CSpjf/nVDnZ6/hvR7m7vciZ\nbncCEgktRcKJS5k4HyQaOxcKYuZgPgDc7EiXby9aH2HudXgQ3H6kiRyoG2SH\nITfB6qd6TgHG14D3aReG27g36KJeRTUnTZ/xbDriibZRMFJKcMV5ZrqeMJWa\nDRuxwKB4jVx6punJHGK916LF4ZNNxPvhAU6HosySvwuVzIWxHqt2vMQuE+A9\nhZlbvNmex0XpXncI67aMrjfIDSgHArFNWwF+TjZO2RnAwDqrxh7y5y59/nj/\n67qtV345LvnyEbgNZsv6t4b3Az+WRbj2d+gbktuTJ927lVE/dwVdaymest2B\nJq4s96x+dL7Yy1UstWTT/7FQcWebAijcDnoW/717qcT7ICH8efe494jbu89+\nklRn1t/X3i3NdYTg2OWwF1WdX1XWtVK5CXZjp8RSTHO0mcrqE56vFKZm5FsN\nLE1laXT85kij5R7bKQ8DOzCute4ZRoETCeBCJa0srR2vp6f4wk6U2WR6de9E\ninKo\r\n=opWX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKBAvMpxXQ6j5E4pcP4iGNMUslf7x1rwREg7AoUvmGZAiEAsR17hbAOffQQB1qxkMmINosa7KLPrRK9WqCOZTcZsPw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.779853ff.0_1596475375005_0.6176991252158077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.8aaf270b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/ripple":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xc8Bv5lmsPS0MZROhV3663VO1TNdEkvEC9FdnuAapVQYJc76Sajv6ytyBKYI+G+SHU8VQ4f1zEVHhJjlB4V+EA==","shasum":"364f3f59b1387dc5cf1a6a7ea1382ce1d3f787a9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.8aaf270b.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFoaCRA9TVsSAnZWagAARdsP+wQkAopNY9uwHDk7HN9o\nNaIlFQWIhkjht67nj8iG7F72TGDse/9FpOd6V5+L15ZmxOn/2eaRsmcelYaJ\n4h7qWOhZE3S/xTKtrYFon+xl/yTpN1kR8ssmDxYBjtH6bEcw6uTGuaBeI+7O\nfLtFxZWxHHjmUKNgrEDNFqpSu4qcOVURS6kghp2toK/CmXJBMwkfI+aQeSuq\n3pWtkdAYfR1B151SG/yrSI1C3zcJ0I9bno03nqDlNLU5G7rYTAZ7DeBhq88+\nAqDIIDbryvvj74OAWOeiby9HWxjlnL8vrKR0UXLXwlaEYs//v6PNgZ+k+rh+\nVWcnXuibXvoNpVWzerUmzMAmK1zuKdfYtOsQ1XzKOkpfz6aL9j+mQ0zor9WT\nNrTG2rO30ToiVEDtDW9IkyqpukwQi+KtGi0k/TCynbUSvElhB3M2aShQB8dZ\nq1SW/P9NNVPp9grw9hyuuxAudH1TJkyAqmyEJjBUkHXSOlcZvcY+H5xyUhlS\nrWOj4+V/V77hW1YAm5eSPxUkMeo1l2dQaf6njswReDhp1LexzQLyKNJmo4vC\n7vrvZZ7yQqC32hyn6NCGQ5ZwemBPxpoHad6K+hsO0T40RZvBOICL3HgxNvfS\nUochr/R+mmTySJRu1tttO1Q2zU0VmXo0bj/xbJ7FdmlzS/rka+pCjCI1BQB/\n1Oqh\r\n=TQft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCBn5poWR+7BspCa8otta4dElqVWx3ZRkso4CJLVCGOgIhAPa+ZuvZhWSk8QtRQRpuM3ziQk5atmlDse/M8onQZQJs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.8aaf270b.0_1596480026456_0.5688847299962054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.5cde9f12.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/ripple":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Sfkt2LOVYPeQTpZ8JNEJVpjlMrNdp2t5cCPBp2E65e/7T/lafMN6SQtHfh/W2iUp3PW8rpQ++yGr/h5KJMjiMA==","shasum":"42deea03ef903c5047d8528db85295694cbbfc83","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.5cde9f12.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7hCRA9TVsSAnZWagAAbL8QAI05nYvhVKr4COHBNHW1\nMhLQ/BbHzeDHLNgjMPGcq9K2eJ0FAWgvpnT736gN2ETlmjXU1hRN1lU8OYVD\n6SgDFrFIQ1VwOxVDpBgxciG2QKzoLzZB0BSunDume1fYIEvV7xgAdw3UVHJ5\nqge4E5+aLI+SgBn+7sn1qL80M1a4RsWvGsbEd5vKmokBGCGJFlgnnW2x/V/Z\nChOsCuKMTZN7t+HvV2Uiy9o7qRpEAmMnFZgvBdAejGwjuNRfkB6tdv2W9uEv\nDGgq4dqc4wL8oB0zMY11cQo7/HJd3jWZsyS93hJRVhrVmzWSrxFh+78Yhcl1\nO9h6Vk08gFgwEBMy+7j3klWWZPrmY5OEXk1ln8CjrQzpY2XNh5UV2R408cIP\nQb7kWXommEhPASdQsdxIwFZ4TkazoUtVYLgmZQ0i1pswdLfoyS2Y3OJNLU6j\nanSIZ3R95S5SQRM/1cr5eOWHifK6/sHzmsw74ev7CyzyzniZ7xXP1vvRC/Gq\neYT5Zt0X57eiaxO8RuSvyBJIkGgbD5mvWv0WZxl2iE/t8dseZVbqWZ1iSmeE\nIqeK4ew3hmbGUTL1Ym8oAMdytNCDBu4NW6P49Sr8dvouoP4OjCJH9aHIW+Cf\nL9NHY7d17QV5bcNMQc4Ip1Hlt4g5Vqq5It2ctVguVgAZ19MhMBfDFE3o5arg\nMzBr\r\n=RDIt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbsXHyhF6Aw9cnlta/sl1kHYNwCh2teiHjAlr9iUpr5AiEAhrwBSonALxZQv70r6oSPYYCCVee0T28KhXduZ/CyHO4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.5cde9f12.0_1596481248676_0.131668011135337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.1607ec53.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tZskeCby75IewBCDCsnISgLgm04htJxCy6N/Blg6Lzu/MJ+CorLa5hRbskBXfcKUQOUXO2nDvz9hsktfZjSyEQ==","shasum":"6abfb1e8743627536c6df5bc097359dfdf6fba29","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.1607ec53.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmPCRA9TVsSAnZWagAA3gwP/1HEbKjvBD1XtmrAUQSr\nstP0R+CTB23qgL6ZLgmQ5mhIOQTOsRzsXi7KVGfRfpVZrUcxfAolGMw/HF7h\npsfKAztr+xzXPTks9tKI0GBt1EY4cY/3r2eME0AUWlTlxRc+ajfo7xLwCLqJ\nUOZAeIiqZuy9nRdm/atCORjmgMuqVHawEzSqLHz/hM5ozQ8C9kYe8+z8cJmy\nsZN86VldfpyOuM0qpq9E7p17PqlLeYU5Rp2ecJv/eiEQVkCOcL2XLwdy7aL/\nXI29/UzC2tornbyfTpmQq3s3gzi6S06NgBtkhKiHVZzOlz7f8HpJHGwbXRRV\nzKWbuPLo6irB/m7WwXV2iMr3jOzhs/SjdAJJ2eZUo3KUEMbg5RAZlHI4SS8d\ncROQPHYMDRDCPl27LR16hjUWf4qPJBIqbUq3Olr2E/rCenvnw9FtU1lHC9aB\ntbakq/z7j+iKVYrhobZsx8fprBBCDe4mrP47D71/ONh756tMQgqcii8ji+s7\nKbC5Bsnv8lXQkQibl6kAbBijufddNGbzJSbYGcGN+tNT6JJ95H6hfR8LWc/+\nA8Y/6lKZY2dZ+gimQkP6lMSn7TTYXuOLC08o+TJJypbbOqKztpEl4KT7dIyX\ntCe9BF/tJIpRWh6+gAe6BQVv3wU5fc12DbRNXZX06x95uyzlqFKl9sJc3Kq+\neEhI\r\n=ctaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDC5+PcdF2izxwweJGsj4RVedrWldMjhOq/ckhDhJQM+AiBO2NG2FpuCuFPibaA/9TSHGbq6IdcYRoKYsK9+G8VZ4Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.1607ec53.0_1596483983110_0.8284266097768729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.678b30e3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sCmJ6W67hDmgpPYxipCxi3LiGbkIuJE+Yuunydrp7Tu1RZ+Xlw0AXWNW2j7cGYheWWex6WFV4K9mI1ayU/DzUg==","shasum":"461cb1797c09368385d4dbf8756b8c06734e7f49","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.678b30e3.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGp3CRA9TVsSAnZWagAAkpEP/2swix5eE6vsCfahvwdM\nlIwjcN+EmacpwUW2OuZ3tAyVAahOHvk0KspINpAFqbMn77diG+Pf6dgnokVH\nglgK3OMNzs3A3uF5lNlyqvmGSUW0aVmYtDLAtSMHiIliTZRvJXCPPZ/Irbx1\nigRqwfs3ozttMMj2sSx60315eljt/w3bFOQ3gtnxh4TxuZx3wDWFjR7MrlEH\np1ipiGyyNwg9NrSKRrW9uI/Rq9fHXgUts/5Tm+8FcmY4FHH7QgrjMiHLPt9o\nlHcw9pFCNMHyDbu+tiYAIWRuOHhptOpTrbwt3upWYlmA3xsWIkpVRVhY63+n\nRBTbLPNpvELSuIIODkpM2fFhLz7Ad6YIAqA+DoD9+mkju1JnWOCyQvboTw1D\n4k5IMbdZ8C4VJl8Mo/wY0rqrSXK1MeVo3JPdoG32y5w63ORhyIsAiVSeM2EI\nvbC8iEeq8Wp52mMvfo6LPbXCWdjM3qh6bCqaU36eeVcbiwOQnZHWClh0iYGZ\nqwanqPuE0zxkkLXuVDcKZZ4R+Mznmb4cRQ6ykU+jQCJ/5BcyO+IzHdcxjG4c\n0uzbbZtvBsGsh3EhifnmfXtquDH7av0JaI1pT3pNA3RdStjjIY4OT2obg8pg\nrA8Crd5O1+XAI9CT1URyNkNhdiIf8kh60a7ZDtykuS2f6GQZgEI5IfT2tI2P\nT8yW\r\n=RGPd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyC6oIbRIbg/yRiGL24eKA76ansQmb8P2uA4xiRRrVGwIhAMBJCiednBzWLoJgBB+UmOatdEuiITognaES1GVSCaOK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.678b30e3.0_1596484214795_0.5269704583553052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-ripple","version":"0.18.0-canary.21c55569.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+kaNUKf8VnzJ2uEkOAp1dOpiFp1uQJy2137rOAyubDuCmrMhXmwhRebg3ns7mArhMR+FItkMjxT22uCwmgBVQg==","shasum":"1de5e17dbba67709984517f588de57e4bd817e8c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0-canary.21c55569.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvjCRA9TVsSAnZWagAAR6cP/Aj6chPNuoPKm+lFYns3\nqHeUb+DcmeLcTYNaq4QySe+cYyWYiJJxYLe7PUQokpIT9bKtW60IrXYFNJjA\nn580RBI5mMamHiPzERRxC2OrCor2bO+HUaudTlclxWD19sIT6iEoyCTdz0NG\nUiltzRF787oJXEjdraH+flpJfRGgUF2g/Rf4Xv5PR3RD13K/w3E67dppEsbE\nLLR7VLVrBk/P4+ENqYx8nvstBpDAT2Tuu2tImlsidEPFurgTYIqgV0V1fR5h\niLuXeU9PJa2DTZaqGyKita3/WqurMp3SZsbC5ZqhoaYHvC2oIf2IlUI0tuLO\nQorVttSFxT6T+gnjoi5KJBydUAR2psEbxTaQCjVBa4lQodkQB88Uq5NXJ8JU\ncUkhrmRf+jrTjJZY5xW9ZJ/PeoLPbGCFRkbjJz7p9QjFtzEsdEaL/JOcjbTP\nYCfWqhBU220cXNS4xV2N9dCs14ywnMtefI0Vl8hKERPTA3caBQ9O6P+7Zhj5\ncuItfxd/eSl3uaGXkw1fywI/zPXlHBz5TJhnchzR8YylUgN+1nxpxizWmzvo\nrd6XezZJwBL3lonGeEAmcWKE1rMq3vGgB1rWodv+6kh07vPxxCO5EAYuF5s4\nrJY54yRhqftytK32A1djAEqh2d1xuofRA6JXmNtsjwQzlojJAKeylsvErgih\nKYsm\r\n=9qQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAhgaL94er3J2EHMJue09vMpBmEyIfel2cGWk6lUOMYAiEAqLbKi93rGlZzt1VqVLwFzz54wEH4ui2/lDQSwVXzKys="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0-canary.21c55569.0_1596484578821_0.14097401576293933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.907d4d7d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+19vA71A7JMeB6M2+SEuFN1A3Ll+TbU8nBskZcIXP56zzNE5hgaZLZKrrxR3kWxr7RqeLGUJYbMrBHbyBki+Tg==","shasum":"8fbd1eec0c4f7244a776b1cac46d55be5147a937","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.907d4d7d.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKH/6CRA9TVsSAnZWagAAWGoP/3pdLqYXWwaDCkAz5133\nIOYUIUsXhjziprpnfyf1XqPY+grEtyp9bKsmAK9L4sE/x5+la2Vbom9cOXot\nLWdpanwwwWIBUg6F0pD5plRIjkgnPfJiXep3vxMz8LLJYEtbfifT1fC/W+3P\nZe9GPW//GUhWmp9ds0Pukq6L1H/oq0yd1W/g7zHX5OG6ADZuENifWagTBhjO\nnUxiifOvefKfZb8hdU6+qzgojqHMC0LxJeocAC68NSBSIHYU8nIsyhAw7t17\napvLQHVVOC1GTuMOqgiJSTF5epEhDf80dbtuI5Oa0IJXpyLH+n4bSebQkxm8\nVeZUZhkHHNTuNu2Ad3RouHipSDDMgGnzoDNE9N9IsHQzfB3RWnCYGXET35zd\ngR+7odT9rH1AYfspqYjNwMAHDQ6hFE7X2dBHQkgosLram2l2FQuxnSFsTuHM\nyjgmPKjG1Vz9GI8wXOcVpf2gHjb/XMeO5mAOumsUB9qzv1/99g4I28ZcZDNc\n6Xc/A5sx2NMRMzhL0OgF2K8kEh5MAuP7d74AwaDcIE+dwEAnORga5qp/Q8HW\nzCUMtwNZznFg5iJWbZktWduUXjCOinBhL+UNifwGR76/LxrvpfRu4/VLBQEy\nNwQULe4ZBr9e1TKj1LI8tO3IKMuY6S85mpIHroljUKbi0EV1+3Ib++IlIsuf\nD8Og\r\n=9Z6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFMTa1ueXjND196MRGGGbLST4AnHKQDn9QtD/DInoSiQIhAJ9rkOxhqvUfR9JCIEnjKG2LzxLuElFO4UJiT4OFomQ5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.907d4d7d.0_1596489721610_0.5588657670469781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-ripple","version":"0.18.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"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-ripple@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-6+7QQmMXmbd42rQOPEmMnY7Sp7EsewI7Ar0N/d6MNrd+4LIcC+G9+mIambZ+r5Gs7i3/HTBdehKl37jCW5Equw==","shasum":"3f8e5ddc5d1f1a53cc818b7159dfc7dd02926fbf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.18.0.tgz","fileCount":32,"unpackedSize":114560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIB+CRA9TVsSAnZWagAA6/MP/1rXDD19rQJN+irR0C1j\nY92epNOmoQQmVEcUh8+bu1Bq9FoZ1TKv2ttStWLT8T9v8dMuQ+9BI5VhTf5M\nlrnwFsMREfVCUaMO3BDL10vS8BvaI2d2gojpu1nDz/JiETh2OL9HCCwV/ao1\nEPCw//sIeyGQO/vcNs+S/MVRr456FI8kqIyUquR/+xczzUpsy7P+zf2BhBMM\nye9eUHh2r59YcU+cCsV/aUjZgYs4cvUWOV8FAUgHle6EQu+x3BjEffl45PeW\nB3yBv3kykaW4F+sNheGw6PFM27DxC4adelANeGT/Lhxkli8LDfxlj8CGuWka\no2SQqxDpl3h5YpIs7fRdPayYJenRYIDU3SMoQjR0cw/LPJXFlvx8rpHy7ayR\n0HL2VLCTB7AvD8SXiPXvDaYtilCKyx//KjTrHRxUn0ocBlU5WK1w/0H0mLdL\nN/MiCU0faxlr8rSVClSAiJasj2P+JwzPP8gRqSM9/vdo8oKW0Vaq+B+hjRji\nmfqozeTrw8Tc1nhprbEincbJZoHUT3WiMFAsdNEd1hCa/c8NJ1c9NGwz0lVb\nMPjbMkMzgPVy/Mk7cHtJytFcTdyOFB9bqK8HOKhZHviW/HbbVcPG+/ZK4ukw\nm4m18G1s+eX+6tzdRZsrNbCGPWGk7f4QMl3mXHwusUo2aRBcCQ39lZpdLvSe\ngssX\r\n=aBFC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADDxmMOKgGtdXttsDWaF8Otrq1knB+iKpnExl8v3Bo1AiEAyCndtrDw+GysIOVCTF/9hUjLnBELgDcNwUXK6seAec8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.18.0_1596489853465_0.10255465013368714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.f7958e4a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/ripple":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IRo4oYMNmqdG7poQvn8C8fh5tuok0UyHL33S7AmYM51SslglxOfpcJsmv3hFM0Km+YDPMPOC1ofAZTqXpj3c9w==","shasum":"20243d22fa51117438de10539b68357d1d08be4d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.f7958e4a.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMKnCRA9TVsSAnZWagAAK/kP/3kVjbJCgE2v/ewUufSi\nV/72FinxHoVdHScCCP7HmEhXJsqwE8QjW88/1577XtlkzvqXlq2RKnwRmuds\ntALdty36VmTZ0e3a4FHWk1HLe/GOSK4nL23/Z0ivXQFk/5RprXgXZPfg7Elb\nPjO9Xn72zBEMwdhu9dvOSCDYH2+qhctUiQyWGqCuvbYrqClrslZjEJp68fJF\n0ASwjuk26bPvXpfI9yi2vI/EeVYJ6VKj8VZ8Ul9xenvip2BEXTd7EyW6T207\nXNqyQKWETCssJRjzSFf3udFCR9KLO6INn+fwh+icfWSc/2raqCLMHLX5kxtK\ns6aZ4p1D5jZVGo8fVZ8QyVnVBdQ++kJ9IXrvzOBuPHFF7Z5fEDox1xF9pCvy\nNN3QnVfHwdn1uaiQQQgWQA0VR7uJSRvFdG1IsQx5nKo1jLhoTgSV2uQiF/Pd\n9XGyG+zpupaa/v1Y5JrsExQRemesM748EiEp3ABDhPeOh7w/PM7PXqpP8j29\nPE97xtUIQAmvrRIYt5KsPG+DV4ImEXJD2sIJEeK3wCQY+uxa7WnQo8wYaRoe\nVKXJ8P7MJZBswVIrGfrvUf+63dZwIc4tSZuKE6yFSYAdHbyHSqwbsmoDUgjY\n4h66BI/3RCGMdo4wTLcj+nLcuEutya/DoibcP6Lxn99Zde4xVWNseqPU3EiV\ngQZS\r\n=EyXg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+qwKkvTabcgbSQ7jmU3qWmZYo//QkgAXLxJ8FamwrBgIgfXLjS8iP2Qhl+Z6/GeXsJ6eMSAZrsMYlWsojESHtje4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.f7958e4a.0_1596506790735_0.7759526685031937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bE4gjlRBg2Lci3QMgvqZ5q1N4D9AknJwsWrpkfELMPmD/KbgRhy/Exq81O4LaP4tpNSTT4muA6p9sQwsJkndow==","shasum":"6a8a2de7730c7e5d4867ddda1e81fa67b737c13b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.f8ceaf79.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRYCRA9TVsSAnZWagAAOD8QAIDjghX8QnoKZnvlYN2u\n5hViI4eGRmKB5D5TOSQIgEAX8kX4DCmwgGbuPVL+2kb/7up63lokiESQ4OMH\nFBb7To22u14Fx3NVcGcmTfp1AvsG6uUb0BuSbPTXwi2PBFdviEzsliefzyvl\nX+Jwr28dPCzDqJtIGuBrnD+Bu52MG5x3AQKMrG9qJLiaDtA9kNBkugXP97Id\nmfCXvWTQqmocc+9+v5GDMDPJzpAqyN8B9mtk72auqahcOsGXb3iMxx0yFPPl\nK1SNMsuOwI7pXrEYG3+tV3YNuLnInIb7e8WY+z9t/UWsH9wUOmTQ9GYl5dlG\n0cxYLus+Iu9y8MxCLA5DmbVY+d8c36toaWpm24J97y9AtRm34jtJ3g5yB8qJ\ng686XAovc43XK/01XsbpnTBEscNuEgeGp5VcGdQ/tWLJ0LpzqV8V7z0ACnin\n7zUs6SzgVsK9WFVSh9oZNzoIBs/nMdcGfbrMULUT3YwJN8qVY+y/QVZ1H5RV\nE34hxhzqw9io7k1yPmWNjUzB5Tl3FjtJa3+8hkbYNVJDyCcVU8rk7h6uAjtV\nRiPxCy5Gl9WoT/10SP9rBfO7OcKgk/+V0V4HIQJS93GP2GBjMNc//75NEGjm\ntfhmYo7RtdE5exikNFeIafE/vKHMaNnaBuPcBfZ1XnQvogu+sBR3mOJbuHe+\n+paI\r\n=zsrV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClx6GCK9wdxjk6B5devi8I/lUB1sZevE11hBlDllxO6AiBEXfj7ScdhPfWbOz+w/4d1Wj6jgOv/P27oSnSKHTcEqg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.f8ceaf79.0_1596568664511_0.625491210271538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.6b9e385a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S94Sfi1G9GCpGIjM3pLuttQaTiAcxP9Abo0G7+/YUBcI50H/VANBzeL9sZco43/21K+Jj+3DKEjo/KesNJgDTQ==","shasum":"aa626ac53928ec0a2e5a630f255f7ca83e0dd045","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.6b9e385a.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdM2CRA9TVsSAnZWagAACXwQAIaVjb4f74uptUt2bBqy\nR0eIxvB9FPu8cHks2cOCTJkweU1OvNxuPPqu9q2BVWw2mK08tYdCszABrJQm\n198atcBA0k2neT3ZorsCA06lIAfln+ZSMjnjdykEBkT32zLa0Iycb4Y3pxQ5\nvE6Fae6NgQADVPQIEmU3om2Ryd2WbnCEe6JeXwTB+qKrmIGBPupuhWM3N9zb\nzXgPsTtu8pVFXM6HI/I0PlEQ8mynOjRQ7ztmo7kzRzVzGUrPmgqfng0MOSKH\nyM/B/V/R544cN/6wkTY+nntwH/kF9AGzE/5/QsJj+qVmn8Y22kxtlGZL5j4s\n5OcpwSU7mmP28xxZjP2domz7dPIXHKM/BaZylx0aG0qetmGqQfZP9DrYi+gQ\nKZyXllqVAziI2mFOEI+oE3jpMMMhS+AIQ7kF+KnrU9reBSggQYYzsDS/gPpu\nCJlKdFDvf649bSJhLgUmL9p49o/U3eLUzerU0MP+UrNDRpQN/U+NkTSP/CpY\nljhhHNtq+ySump1VLrIVH2p7HEDoqm6gbSJ/ty86LTjv6I2nS3G6CiLAQzXt\nlNNDUziJ4MDk/ZV85KU6yj+AgbMOrM/OdupIWQO5kzUSWd5vhySu80CXEeJ/\nEa1Hcv5Knq1eFMpFoNI87bJe+UyhLgxQ1WiETDDVBvqnLZSjEIcBVu1mpVT2\nFF7e\r\n=cdUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/CBH2sXytDoJc+1O19PD1tuUcwO8Y05lZSHLm0LEC2AiEA8nGC/4q3Efq22nwG1fNKrADfyhGnlTQ9F5osp1JlWuM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.6b9e385a.0_1596576566106_0.07808743060424428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WP/904YG6MncD7Ba1zI3tidsVNIgx3IkV7gcEqIQVLnllsXAtoog/Zz0WT76A4lib70s8JvNd7zMjN8oESvMcw==","shasum":"93bc928172a1cb5e606e38268a6dd0d84d756983","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitiCRA9TVsSAnZWagAAzMQP/0o6aZ/alEBpeXVCVxxp\nG1Dq0YfrDlOYDT24tCsKnM07pvW7a2CX4PMFFC+aaSKqBPGsz7PD495A46xn\n7Wfm5Kz3GZn3HSRwo7cZr6MXy0X/3eWIWjktUQuQf2bJzN4i4ZAItOoDHI8P\nQcy14z52wNKrQWWrlxR/y12wmgCjWXszbSeSzjmEnwHoHGKaVYo1bAudaHot\nqkuyULmvJr3K7AaHEr21Sg5UaATvXi5TlfgwOCov/Jbo+eYyTFO05GwA8nX2\n0PGW73wv7To7iKUZKavmr9z/4M7wrAxvUF5vvZ6svNqolLH9McjPmZOqpNrs\nP/H9fUuzxAqSeezsctcfrBP8ycq4bo4Smut7G8GOIjz4yD8TnPMPAVrAtMTF\nkyEr9rdeHG9AIPNoQHOtnHT7ibfGa9gda2n3/7xkmWM5C7CV9dCO5Zp5MiQX\n401T+yDBXPOq7bEv6ejckAwzCQst+j+nbe/AtplwrbBDo4CY+okQuduEMnHK\n5tzVMSKjBItg1QgEmjgvvgUedCpPmanJqiU9F7MnVvvdBpEVfRoFkA+EGpej\nyH6jvJ6N++MrfBP0lufNHsrvCgn9TkVHZXCoMeU/6TxJ8HZwRQwoL5RUt8pk\n6o6WgrYCDcd2un1SQzHjC9kPalXzTprQncRVLteVzgyKt+k3bYNLT2sY0fhk\nBd57\r\n=e7LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPCNvdLTVwonxYOF7KL5c0yfluX3gSgEzuekCb053DoQIgEMzvP1g5nQlg3FZ5WPe8H0DV+5K0vbTH+bEqW8E0oZI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.9a7e6d2a.0_1596599137942_0.39049857592677184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.188f3f1c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i53KW3FYcJ6xQ0+wP9iMH5ViiXRfYX+mjCBv8xKPMh8pL9cQ4JQDOBDMy1lNiSuGwjiY+iG0/ADDYmZNpXbtog==","shasum":"c29c459a3a4b39dcecb70f48e8c99e58d92f7687","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.188f3f1c.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvawCRA9TVsSAnZWagAAl1IP/37qxgpKXhWQym/dXy5e\nJUyv22oSK2tvd4ggTpBQU1MR/c6OGH3aeNw+sbXzPM9jeRvrNsP7Kn/PvSgI\nPkLSfiz69xJA1v/t4CQW94Ts5CmLXzbInfQkDVh7JHfFskbAVJlK8KmB6oka\nvyrXXmon/LeiXTVE6NAZuT2pOxjpM3f/S5eojdiqaUaG0ajMq8F8TJz6GnBz\nQq2CTAkZa7kl9ot7jxq8rqQ8lOvt2z6Sj/xpTLtgbPckoF9b4WzpSsSgWXzV\n9ujeLqsRF+w2qWQbgTGCW9bLnko2iojJDRlrd7/A4o/efCMksKGiALkYU5Uu\no37vjseEut1x+BpeqqT1kMYcKPAhdxkwKWz8AuzP0zlZj0HR9NYBaPMBz+K3\naPDyRmKukKjvAzD3yUjCDfciFVXYfOnOJG4NrtQalKFi06JH8GCXVlVzjqRb\n9PP900soDJrsLX9UOzPvv8hEvMF0MRBPY0YHHxD6M0zPbpQ9szQS2RyDLMzH\nVlU7r2SEB09gm2scuHNZw6eaDQLMJc8glG/p2/UkoxhKwyvqE81VvT0UN9Pk\nLMDkYZs8DiKZU5YBNYJ5L/Fu0C8Xpc93Nxwi1L5fQo1G7YdtxJsqSMWi4y1R\nRJ2IMFB9xxPzQz6VRlzWvvgYWR+6RG7i4D++EDdAQo/h6+8MO6cpobmrS3Z6\n02m0\r\n=vUa7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEU44zsq+apY+kblpJlgMCtp9PFfWoZfyr8utvuTszTIAiB6IqlvVNu8Gi2MJgX+JxS0YvIKGvDLf+wcxMPZ6X4tRA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.188f3f1c.0_1596651181635_0.08939295164374617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.b6106add.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mhwLfnlU1C/9xWuheALMS8X5BObP46uHkyI6PbjVom0unLxrFrsWG5BXOkhAqrlFkARvSd8lzg6NqD6CFfo7jA==","shasum":"d511a96e59c70a54c76b9a6814720ca64cac449b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.b6106add.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtACRA9TVsSAnZWagAA5IwP+gICyvLCpsv41yp2G2ZA\nZ0t6ZyO8SLuGUiUQwepZ54axHzc4RgJfVSAHjz70fr6ke8madPN42BX2RbgS\njS0Ee/nbwN5UdRdjovgn04v3EY2RiDh50YMAly9EcM4I9YEFUjKC7VliOk3p\n7cLM6DLzJY87blwuCVAY99my8IQpZM14gyOL25tQQGIQR62wEuMvNqznAKuP\nOQciF7ZxISIJDIiOFHEUj9MueCDJwP3pX3WMEArOiPuSbCt+437fhMCtVUkc\n6TQdmIprRD0un3R7598xAqyxFW3/WIYzL4wxfrihdbaYGPDg3byUaor45R4a\nvW3mJFUu0Gj+pLbHAsZCeM017se2kwl2K9faz1yStOanjJi/pSU9ta7RPSeM\nAoImevXI4i+6OAVzEq+cTNvN/Y85W1foYPiN5a8JommpxtKnOIXUVe0j4uTD\nbtD/hB+BEp0SPYZ578ISaiK59gj4hn7g12tiSRpNkD1MeqcKkQscJ4itY1sr\nnAbKP+8+n1sg/00/Xc9A5tRbi6/6uaY4wOw2ubxA5dd5rxBshBM16vfxU8Lx\n1CeaA80Yy9tsrPa5/ef/R8fb46v60bCSEmaONUSVOKvMO4n8E158ul+Jztof\naEMMc7PB2lvaqvVSslHkhEli/ITMguLEiU82tHGH0vOc1MqRG1MB95+eAEMF\nSrKZ\r\n=ipI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAj5vylTomonYIYCZB+dD+uXUATS8i7VzXaprM3d0VyvAiABgW5pHIiTrtT3ScW7pUgFozkPkevYGtX51UZjuKjDdw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.b6106add.0_1596660544222_0.9011150551864537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.ebb4c667.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mbAnXF7J+HdoCjlaZV5AsWOUVyRD+kRIeWwuXvoXv3KKdobLQJ4bPg4NVN6D0Pcx5lSOxD9EBWp0XFssVhdeNA==","shasum":"506ac9c5df3ba1928c59a80bf2f4dfeb1249609f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.ebb4c667.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xVCRA9TVsSAnZWagAAm4AP/1PDvVUQ2NTSmCVCgULs\n5xVg36Gq0JmgwjvfEc8IDl9+Ti9K5LsML3Z5PjCcncprCJnSseZBwavZZJGy\n1nEFtFL8FQZe2ipTpJhhQC9r9uR2oMfzC54x3eJMV73FweffeJJllG/PZqdB\nttFgpMvPSrYAgRJPOzJZe6pS55iIaKTdKQf1ccQhqtWA8aDsEm+SAB+mFWHp\nq3YQMH2Kx5bAm4zDwMAPk8HCCGbPp6a74r3pWhUEdqpOxlLL7Gq3oR2rYVv8\ncnZwRJew6pZQwJq05S6U02vG8S+Zr8iKBZEY36sqpFh+Avw0YEwJpspSn1pY\ngnI/NLZjToHsDirkxG4wSWVC4X0UzmB5W+sDhqDg5V0xaJ8kw++g8ToXPTcE\n+MyPc/U5df+TVnrIKj//j+2LwAHWjBi4GrfdKu+G9PhMJSadgJNZajCbh3Ak\ne/Eg6m5UxMVnMQGWOodyzmGf2KU25+e8ftUa7BqPWNc+achrUt2YAeZGpH3r\nRqL+e18YZ1tott6KROkb/QP8dgX38oMYXCteGTE3dY6bGBhL48QOsvj3kVHl\nviz25ZIaRulvGPCQk9/1zkvhPcyRQXetgIxxAGpzRSqiKle26Jf28Q5iQ3FT\nMeyKVAbnRXTdHMs/e+lsifqX/IF/DyUly+2fmocPJwQDyuiZeyJqNzMKYxtZ\n8wBd\r\n=0P0y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAwIWzRdRKEsQzdz6vmvQhHBLCX8pm2XhtBDcJgG+lwAiA2nCjGOWqc2b8iv8Z7gfd05qg9iY0D837QAx0BEds0uQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.ebb4c667.0_1596673109254_0.08042116199087923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.aa44289e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1BNY4B5vOkKdUGDC21wKgajovogNBGnKe7COxO7FMKWqrqbnzTcwfTotEHXWEPuu4gFJAYSdNptNEunDaEUfGQ==","shasum":"df8973b6ecec0a27c1cf96a0ece974560dae1797","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.aa44289e.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEt3CRA9TVsSAnZWagAAYnQQAJxH3cAJyj0PC2fL92+J\nK+TYT6GV0/FVNzSZ5UBscc7LEgw8LHFEMFL5lWhVkSBFp5euHVn9RLR5mwOr\n8V1lZzH2qreXrRj3UiJSoXyS4Mz0RLuukbn8LIOekXg2njmY4t7NugjTycXY\npPtfwoRD6XSFs67Mqu6Phr+yrAOU3r2+qOBdskM6TcSCy0D9N5fY5+nmoLbj\nZx2uYw9GKW1upIJ/Y66cvqDpUZCeIG/3vzkGmqV+8a49hWPWuJwJVO0JbExe\nkU0kCxoCCoJzJz7E7cWXcOYQE4UOH24m/IjbtwcaTiW0ACExQTe2kVPTVERj\ngvRmeijetxTwx2Z7RE1DT5f1ihcSk0QF0wk9F+ghwcB3dvtAdTg87t2dKoTv\n8/pi7uCQwqF0GV5nnC6qo7bakajgTLU3G2dT0ZAXRIKgFUWXJNIUejHQ+wXB\nCDR9hg2NJ3WVBlEkdwi79KJDEcz9sQoLVord/nAkCZah+7U7wTgXhivPL8Gz\nmNr57dQbrOa2/QdbqgMGdR9oVWlYmwrwwT4VqAHYJhmL9X3rx+MkCYEMKhQW\nGbMshWqCzdlh4xBdoqHA81NolfTX7Z36aJoSqI+zkg1i18LhCaW+nb+QeiQm\nhyqysd4ZZHlmCZTELfiZOMWZ+ma3ZlotuArVrZbVoWQoL4PGNSu5Mrs5F/UT\nH7HP\r\n=bgFi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRT6rLGrldCyAnpfK28l9/hvSIaaLYKfWp9DIJjbhd+AIgCIQVOXpaS3vdAyd9wVaSSPRlG1nbva3bdqtj9TIteEY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.aa44289e.0_1596738423407_0.011541013737367045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.e6b0816b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/ripple":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wTzMfr/Xwkz/CbSK2Qzx/NcxMgQt+yS0y61KtIz9TU7yls98aRCqVUjaIqIayHjudDNQvq/7gsC8RRWyq/3LPw==","shasum":"92b9ab16a736e7cbcc18ac8f565ed3fe65d6ba65","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.e6b0816b.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDLCRA9TVsSAnZWagAAgYoQAKM8CdPPT2KFPzHP9Bar\nLj7EoqiBFU32UVXBvsXecq38PHyjWQdDqNhnrCE6nMl5JUOE0DCZyVb1d+ct\nPyiS2JWjac7JL2pPn+DSuB9LyjSTMC+XgTjCyzV5SfscbI1GOxvdB5PGEfEv\nhVWIhzqC0QzYozIdp63i5l3K2gvN7nZEB996LvsGuPwy4VKqX1ugHhtjQ4Ac\n40A1xCiryqtxuavsiKMSZ3QYLt0mtQxXSa+pMI656qnFnEsc1LvYuA8BU5Z4\nKMRg6aFU5RwIW4+5JiRoCbbclrsaib3HnLx3Nyk4Z+2XYRHsJwJHVQJAs3dF\nUz7wLNx82ehbTQUynljHtTf0WN9iUIFyT5fOAqDwE2y9R8zHxPOE1LG4yXdG\n1Al8QOY8zQgMS9JgKZ1wWKG9UaowVmzhgaFVEZ2C0JdTxEnkhI9Sjuyej23D\nVFRjbV0TgwYAPAWUBXmlNVOI4zLYDujFNjx8Lxl5cMMuzMD1lELsDM332oRo\ndIBbR086qGpdMmHLyK42L802LYt5FMa7BmpE30++feWlqI7RFCYY0+vIaiK5\nZCAoHCayzIQUHA61tco38j/tL2LKdXgZ7b6ZIfheBpksZTvoPwOYntZbc8/h\nSpqkqIA94G46x/GQkUJ/kygvepAqdMeQqdSHZwdVdOHRk3yXIfxkFuIigLMK\nuK7x\r\n=v7Ht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYIlPhpgVfEmdMiQ7r9FjHz+JeA6cjefp7zqCwysJgbgIgN37gvlsK11UybH4N0PS1Tlwv6/QUgFgoeSKqYOlP3vs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.e6b0816b.0_1596825802843_0.0393825874698388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.96d15938.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/ripple":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0h8X5+JWeBEAIQwlUsArLFHtjrCZoF5oM7ckmoTWHf4V6OdsNCRqgMGqE1KfVwrQvdsQaDxxQRKwv/5XeoIlJQ==","shasum":"5a9ef4752a832a88da77544752c07edfee486a3b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.96d15938.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLblzCRA9TVsSAnZWagAAZuIP/0kVaqN6LUjEw+Aqv0Yv\nlWiXJLpX/c5IyAnkVL1HJPxxIDnVGpcsvwo+7Ht6BmZt5tkHCkLx84Fy3slN\n1FFxR/jldVPJuw0lhkW01OipxxTlJfFcmuKUqUqYqLTcMyeoKHQURkWcqEAC\n4vvrgeyJN2oiRjG2C9Ob2KperAI94He65UD5FmgF9jtVtWRPEjdkc6Rsg3eF\nOcdunS57U4YJI9AYyK0OalGRiHS1k2VbAPGvlVLB1aLMC1Ccqhi+ySTGfwCk\nppS2s8I1CV4IOimjq7dJDqhGKQNk79DtmDhiJGbicGIc7km8WkXEf+/RcLl/\niLHjGGAJ9Sx8pZM18S8cGXyXn3NNoBnhtrayF1VSygiPG1uhS6hhsbWA8e1K\nMUkCnnF5QBCnFPa8hrmlqR4Qev+bo2fxbsKqxYRKoktxd7S49sjNm/i4lK+g\nwggHqGo/rJ+kANGN+UcULDg6unzB4mNH8AWHYVkvk/W45B8jr6T2Gg8Z29R+\n2TBSCflazTdhq8swe+yZ1SK//uo9xsTcciCsmln7X4QlK1+Q/2lQcnmaIlhk\nRD5MXX3ks40vP0AxGY2LjhZt7EZwRrjgpC0Dk6L5WXfat6cAB6M8vv3caKAT\nhd3byIOMdv3p++8iNB1/QMyTbPRDTNatctY0p3JXpnSXvSUHqwjbIbOP+mv4\nfFHi\r\n=wjqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDw5uT2wmYpDsHh87sn3I9u9sLyFTl4EwmQF31dGL58RAiEAkYEzvSzMAx1EjuqMnbfI89XVwgq2R7HezsOOY/rM0hs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.96d15938.0_1596832114619_0.7174465572266022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9d991c8c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/ripple":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CpslnW8nrj6OlIXeqggxQEWiQC2Zjd9TxdKko8QcbYLP9P+9SCN3Spf6N9W87VC0RU6sULJjUHTBmywJbyp97Q==","shasum":"aeb2b4739ca46649828b9dd96063a86db4e1bc80","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9d991c8c.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDKCRA9TVsSAnZWagAAR+cQAJcO2a38mXqKJQLUJn+7\nl9BkOfDiaVlzLI0mKDrs5WpOCbDDE1fnULGt+s9tDR+aM9YCvz2jToBzfJAA\njr6iV0LcyKa6aeG13C3/Mws+DkA3JoGx4HdTC8GJQZytshYEZNZYJ3iKdDKC\nJVJ8+SuNqqshpJRdWaDzROwOS1fidmoCa+zcXXuET3XQCSGVDAOcTo0T8gGq\nMR3VThoOsftDrlXKMNcin5ipMFyqvfl4HkCkfx6F3WLnW1c1Ub7P9DjJPHDV\nXV630dMGnjmnb3GZE4h3Tg3rcnlrN8/LooaA2HbOLOXl5gxSeABuufIbi7cb\nFS7Vdgctx1Bp0yMIebfBDl4ujY/ExZkyAHKgmxhrxLW1iP0y79UaV899qyFY\nHBfV6u5a9Djw8Yz00grVwa5k2eVy8ND1y3OoBKAdUZ52t0101AB3AtTGmVdV\n2Z8UZkkiqo1Li1vJMO7MCGRqxHj1KDzYtAsLnv2FSqpdaq1d0ISQ+4hEX2cs\nOzzRwPZruwV1T+usLYRMX3oN2DlNZsNqSTMTpViNQ/eXHmnkOLa4fw4MXT2w\nQK34g38p9eSOPAl2Zne9VT4BmjBrTsvh6iguQ0nHQeODSdRoei5mX0y/gND2\nBSk/12ayEkDI8eQZCwQ3K1qiMiKRIZtTJOHVlKqio7EsTLgLQF7RO9ywjBfi\nJjyl\r\n=LEKd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNlPwirRlmY49o4DSvXvYXEmJKtx9m8TPanRVlLYFzhAiAk7YlDORTE4v0bXzB3uPKOGfEK+ft2AqPgGPUWhvJKew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.9d991c8c.0_1596838089719_0.9233569260972136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.13bfbd72.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/ripple":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WH3F2qnf5uQlCTM3AWgsOt/+OQ9EY1ZYz05f/X5TBrXmUcgC/lWjHa9dtJt8ZmSBNvkoziZDr0bNECyRjcya9A==","shasum":"acbec47925e5402c3994d82d6425fea3c94eee24","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.13bfbd72.0.tgz","fileCount":32,"unpackedSize":114595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+KCRA9TVsSAnZWagAAVKsQAJmb8Br0XjXwDRDEJ5k0\n4sOFSgPfm6QPfrrzoxsvc1h1O8z/Q5U03KDu7eaU2NLZS6nqTumaHnncETKe\nr/3O0HKIdc0xzv5hIlLJHr6/wvvjXAFV1IaYKcwZjTIrGY18xc8i25ayyoTR\nyYRJmy5TC1mWapSg8Deb8OD+EDojcjnWPPAdEDcKrzArtql5VtBLlFtINTb9\nsCOg1YJW2vgYltyxouwx355uufd8A6FhiQo3LnO1u7wbFskC1LkiMV7OQ2jV\nOwcw+yOg1qdlQonMpPShv6m5Nu+iufdkjAQrlXjDpIMaNkNWhxXymWu8MU1V\nbbnDaIEDcsQbUpmn4im5149/p9x9xxnbMZ6bol2iYoz1bPuD779hkfW/I4OA\nKWJEevMs90Tp1Mk4v9L7L/byyPKc5ylItnpdnVSCnsxKk84I0nivkdEb86V4\nJA8gfqmcXB07bw4FRS/OO32ZTc8oP6XTrBsZtyduU6L18lHI7qj9DNh32/QH\noLVy0v+GeRc5Sy8d7JB/wwVuto4M+77I9cUAKalmLejRlI7UpLqJNFH5U3mT\n+Lx4HSstuoSmBphZoXVAdXr6osyznD/2bDsXflaAKdGewA2oh/3ZPGRVpg3C\nAcTQKZGrhIgmGT95JIpuXu77oMEyQ/F4U/wHAltDvI6p793kmj0BV6Ee18P/\nPxUd\r\n=ebXO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8irWuBVILkTffrIb5P4UIa0vlJ+h0xSLxgZtH0JVdZAiBHs+2TqzFSzaQnacLAzlPmuy5bt/rDSJpq1rROj5CfxQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.13bfbd72.0_1597087626527_0.09995466551105814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.30b1b258.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/ripple":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RDp61xgKP/Qe40beMHqAKYyz3gB9k/NG65jLSL1kXtBtvFyZ/v1abEitQHw2owzZR6PITHdzBJN37iF3q4aYAg==","shasum":"a73353f0188f38fd273d3f8b7ada6164026759c0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.30b1b258.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajNCRA9TVsSAnZWagAAVTEP/18kQ6xch8/CqyKSLiU8\nmx38TBKhXX89AU9pNm2sjnpkhnVUTR1mcYGgA/QcN0hPMVRlNC471uNj6Vn/\njfHcz9+Kr37I4pzl44yS9YkdGZLf/7JukEDDnHjuAws6r1sScvoggabeltLj\nFzNnVAsF78mxNZFFolI9zmJlEp/UW/ytnfjJstHGI+1VIcoyXLkrm5+U01i6\n56PBvm+cyq0QcQ2q5OH3uAzlU2Q3XmZMkjZPEHseFnwGwCROPY1vAK//L1n+\nj4UyX5saexSVcYmZnD//WBzY2H9EiVfMEX4Fmb0kPOpKjupcrP1SximTy5Iz\nr4cqWGmE+JwL140TTju11NLlsKw3/7mLi85zqMZm/q1+XsULwKhNi6r1OcZP\nXn8PizpxLK0b9kYi5aNLYd7k9BTLgyDUMm2pU0ybhiuA+LyJELT/rxKNi0AS\nXOtTryIvafsO3/9EtPSn6nhqUHnPupAJ0VqQLSJndDrYc41cTNgtL6PpCWLN\nIIP02b+t08Ey/xRrzLozirqez6U8UOZpOsVVYONdZYGRHpQzjVeFe3B+HZov\nxqsk52x7pZquWv+7vTvijr9jcg5GmZr87kvO5HKbPtzth3vqgQqn/cRaAapf\n4BhvFM2fJEti8JGtBjplWmj4YmGhO3uIyEi6HbeBznrjppTHiWv1XaTF6FgE\nUGnc\r\n=2DaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0mnpiAy1EXhszmSl6+R5IBoWhUB3wbWD1XNt8VUzCNgIhANUfCuk55DhCSVGhe+IurRcqpIST+e7RQgt4fHX+wmDV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.30b1b258.0_1597089996594_0.900856246399911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.1583e263.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/ripple":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7AahhGkYGnGG58mHyxfMF/372Pu4kadsxGoLL2hXDROgK28b39Vd07yh9lYGXB1ARUOSdUAJ8AdIHPC4Sdnf0Q==","shasum":"9641d27b7de6be7c40fbbe9585d8570694d611a7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.1583e263.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVgCRA9TVsSAnZWagAA6y8P/iDcvm9z2Hky0VW6KS0z\nYw3uHcZnbhrozpc+dBA2Caoc5Weetu1LttVHBZEwpYkuomaSZW0s2ABLITSy\n8nbrWvt3miaD0I+0LiRwbZsPU4Bo7ojdKqvPtt2ldoGxeOxMyJqrdO1J1JUV\n68T2Cmu3EPu8cGE9dAFNhMc+iI3ngqap2a1f8+62HDz2x3UyKirlp310Ng5a\nI5jEp4OP4MnLbOTWRhoOF9W7qgAWzhZ7o1u8/iye46LlR61T1a4DBDEWmQx5\nIJfIjcqkbd+jMvYTZReijhUw5xY6Yx+971Qzn0wmg1tLSiRpjnMPUWvWP5cx\nb7FP/uQfzjsQ5aozhBKpW9o3bkL2ChYfWgN8sbAZ7eyFP5UAKouu9nhdVaBo\nTmVGkpK4RjxHhmIsGNzXFhAcnlX6sX2cwdMwnzL7f7ZWxB/CL8o32jUMsuAv\njOd+UBJJqm5jU11i9jZ+az/QlmW7GHCWq6nlF/U1zMoYiRkQ3DQl/OYK6yTO\nZpXKfmjpcVvwC7P/scoRUon37+yCqub4GLfNZwJDFm786yfrv7mLBQODNi2h\n35LS5X6vEKc+oGEzCW5w7t9qzeT2gjry8Erkb31jHPaoTL08LilCMlnDE6LA\nXcN5Bv6Z/iGjg1bjVEnEVHN7V7vzQlW6aZFIKQVfxPApr9+GS8CDFdyK6nLp\n5Dhc\r\n=FAf4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnQ83WyKVf41Re/v9cSPYxMtXlV/x+tVM9TOa2B3SQ4wIgHPrLESSMqo0S5cLaSeF/pTJtbXRFNqOtFkX8o4r33Ng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.1583e263.0_1597187424427_0.9503148742641006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.fefb1a93.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/ripple":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+p04QLKpUH7TLXSI/EvIdldGLPdNjGg8/LdddF06+EEYTwGIOq7t9gQPYUwVm+XZWzz2Oy14F1G6h6M45rSGWg==","shasum":"14f423be13d7fc74b197586a3c6d1b715d659aa6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.fefb1a93.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbSCRA9TVsSAnZWagAAoE4P/25qhDR9iy2pgLDxdnzw\nLb9TQWkoh0+U9cvb1cWBKPxFX6gkMUKUkkbNBH+LPb6OsBx84HsmIGj2qqsj\nQhMvNXLros15mvdd94LjbkSh55mfik1oOqRMaB9jXvsrJudE2XYDlTPGMUcX\nMiZuWy5f4kY55jFrM7hRBbWj1/52lIlO3jLaEjkWgJolPaVQaJM9hs/YbI3g\nx/boZfeI81i1eh8l9aMzPIGP5XAZvtF7+9oLLbyE3IS+5m0MMwp38jzkhhWl\n9aQKIjzbdzam209BAx399GDFu7O9Q2SaFUI3A1/ZJ1jAk+OZwpkd1YlZ7TDs\nrCKvfffVMJfevDZSGkR0aOrbgq3/fz/BJ8KhkJC5voyxuEtO1gssdD0tqYQh\nIM7VeaZNx25ds9ch9pKHIXeA0S9LdJzLHgYeFQA+R6y1E3uAARo/qwmlzk/T\nBs0Ezexkdtpt9UDReLp11SFy4WWqlWVlEoPhahsdAewRUIUPaW8pg9XIIesH\n2GTbHcigrDBHmKA/Imy/vGqc8hEv1PpCW4rMDUhUn8O4D09pp42b0lsVXt1D\nI+fPGf2ivz8dyPiv59KTyy59goKFz4dNe/GyoSRnQaWpB8SNFBb67UDFPziw\nrAAeR6Dn5/rAe+K+aDzerioOs00unXhCQRcL3d5Edt5kNvufdP7Rbq5G//pM\nbbI1\r\n=xFtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7Qylmo90L/cdZV37RWGPvCZt7iMLJYDcOleO637GiBAiEA1O3SnyoQljnIAWNmBuZEoIsl60Afr+WXe3GN4OtAd7c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.fefb1a93.0_1597191890337_0.7519090859184479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/ripple":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Wy4aOQ577wkBJbBhAibek/89fk5OM+ZAn3GBgxykbFQRg9TAW7vkedWUcl2k5W7z5o51A5FPE4HIdVhoLogiqA==","shasum":"f593ea2580e4e43318b460c7e679175a2ec32453","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDR6CRA9TVsSAnZWagAAHfUP/03NNhn4HlDeVps3Zsqz\nlTwCPZYH5r5bMncXODvnhKmgy4vATaxLkAzREbGfnqQoH8NtTucitiM500pS\nhPi5SxLH+hWJELzkusY1uTVZZp+5jKrruWR+pVfC8gpqcy0LLZa2cU+mv+uG\nambsh7SrJWkFthkBBHdXc7cU58KFZKckPDtmC1KMSagPklxlXBmHlj0Xl1bZ\nK3M1wddHeKpv5yX8BM/ng7Gq81qC1hfIPCJDppwQ8TXaEd2bMlf3eFKNncZ6\nNk623wNsAJSqwhiXbh7S/HDVDTWY5TJFV9BzzGbHKIEYgpxiYe0r881ddwn3\nvv6WVoOOP99itGhkK34USZfBDMXlq3o3joZ2A9aRzgUBgVKxZg191kHSOgdD\nB5r6R0kylwVv5UgEOHM6bDGIiy16xbIHBNb/Ef9r+yy7SUuWsn/YiUuzr0XW\n22MrcnTaSQRoxA+9NLBHfGtc5hbKj2REYdrrsL2wlKwZJKvhnqPvxO6JaQP7\ngzmGxtLc6HnxKCWGc60FRZ79JMRJpwFw6R1cFnIG1XQUsq4SDjGeWpXCkHGK\nn5Co3Iv9v1JQL0J5AE5JyVGjh3UnaYlnIP1c12WBecDD6R5wXyHyJxE61wo6\n1buPlhb+7kOP2O+A3CMV5MYGtTKwaTJ1v6n8jSmSn+XdlBi6mHSvJofxVlee\nL3Oi\r\n=ApEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/lej4AiuDAbV/uIStoEFNUzez1rDkctOhDxJQFZJHEAIgH87oe4lDMvdGly8INHCiLPWBdkcpVs5/EBekovZzODk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.1ac5b9d4.0_1597256825606_0.47674154837962934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.f17f5052.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/ripple":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6REt7qUe34QKxE1RP9oJrhREMkzUYnmhKOwk4F7yIrENfakwvYjYflExt+Ig5Vo495M3XqJ5T5/LmZquskohTg==","shasum":"e0707bfd19bbd57a900fd30f2aacf965f0457e58","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.f17f5052.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTlCRA9TVsSAnZWagAAvPQQAIPzhcoBPPO7x0OPLww5\nNnD8PObWJtR8dzeVrrGL+E2yr8VRtQ3Xmkai5Ginud4bDGb6QIiluQn7Hpi5\nOIU9Cin3rzn26+sM+i6zJDqDNmhqGozzmrAVCu0tC5t10vzTTkdBH+ikwLmE\nTpNT3I6MWU52qRRLLeP+zhVVb83lKQ06QnIv0JJ/YmaplS2y5y7qDyvlwH9b\nvDhiAEdf434v50ftl6fq0oecPwtZuPIHe5XR9L0KlcRH3BUfav9Kprgf8qoD\n/YvZA9Eg5SU20BUexWnrKf6V6fvhcIvVAEldMziDRQ8XF1OmjDbw81KOolYZ\ncETVX332u/wJML/+I4ForAu+5Ldglrrt77MBeVtkEUhP0DfA1yJiIsNfnYLc\nM+mW3gxD21DTwhihRjOFFQjVwlkxOKds3DPtWEtu6dabmO3LE/z+ArzNCLEM\nmI+sVUzOChNrezPswYq6yik+Nj1M1+a3OQY6UMrchcKwGVIjkglHz2vKDSbh\nY3Vhd1x1wxXnpJUqWbv8WcvRYeLl9ATFh8mJdNqym6YAXQGnK+8YV9ahr4GS\nxiExQmvWg92a/N+a/db8jPumrQdL7q5261wGJu72VjfVQcyG9L5xOOJKJIfE\nXz1kYNuB8zDH6GaByalj4mPprdK1tFlNAmhsjjMdgTlGTV8qBmd6oRz4TBfS\nha1z\r\n=C3wC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpT9FaqlFf/jlUVPej6zcBbpPloR67RIiek+uSiu34bAIgMh9P/2i0xH6Jk29IwCUfff3i3PH6cVKmBH/zeMIfde4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.f17f5052.0_1597338852912_0.6009154074235425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.80b5d20d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JZ8+cDrLBJPBPjYMkCi2uO+6Mx85K1ZP91J4z8JAPm2H4e3oMk6q/NmRMai4VGjW/x/g/fo2ysRs3SIKJfHNRg==","shasum":"94c99c97608395af9ccbc47c4ea9fca965c85f07","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.80b5d20d.0.tgz","fileCount":32,"unpackedSize":114968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYObCRA9TVsSAnZWagAAV4IP/RtYkUaQjdEJY4oo7Xew\nqxLJKZLFF6TE8h1IXihD+aos5Em15jGiQSSlI1ODSOQaaSK8+Ebg4tLt0P+4\nYEqAJRQynecBR4c8iEG9x/F8VjbJuaYfEgltnb2X/dlxjSgZ4BlDd4cpVwq1\ndH9FgrBPdj5mDpjZelr7wiOC4Ep8VqeWn+297YgJ6+MTR8MOELSBduylbYY6\nPSj+PP8IOQvGxTERWRQsFShDnYSrh6B7jnuq+9gOXd9JrDIQm4csTkPL+iyW\ntx6CbFSKqqla48MZbNbjyyedSM9rf0vFv5KdDmSs2D0g6A8H6zrP78AGReeQ\nRJ3jXPjB+aYRlS5e+E5W8VuujE06HbiZP86tyG81b3/la4wMuiJYNPO3H7cT\nAYC0pbXkkufH0EbUGlVsGvaH1FpEEKSJ95+0I56hUczWjVmp0Q7nt+8oG2+B\n02SH7K2D+pWeyRgzLKrp52auUIdor+2hD6bVkNU9w6u3rjZYYWHwBnqzq/8f\nHcDThhlsPTZIRJsgIuPsR0ToWZPFiInUdxhlcwWu22hZuZpdArX+Ps0BUbJI\n9c3+JCcdqTJB8n6/MSGiUSErtfD2R0Ad2y8ovr6vN7rxwcEdGj8XW3mdBP3+\na2DCoeCnkybZDCR9HuAdlegqBDT/z4ezNwjkWy2iRISJZdSu1czDrJed78Ot\nS2fe\r\n=V0iE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7yJyuyHhXGzcKAtedE80KCLf6fIpwmgD2Tl7gPPJKpwIgVAm5QbEg8Gej5gzHBgIBsTvhVVFKrKFgbuw1iXgGOqo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.80b5d20d.0_1597342619390_0.6342692017642475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.758635ed.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AEFZwtIKpfWhf8geLWqaZiI7oDmAoK8VPuthPvHIOj1l8JZZDKk5Y0BMxzBN7MVvh7Cnryh7rJ6JkU4BozqVAg==","shasum":"c8f1d1849f51e267c69b879b6d0257e8a6fcca6f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.758635ed.0.tgz","fileCount":32,"unpackedSize":114827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbfCRA9TVsSAnZWagAA0iIQAIZwzNpqk3D1aRv6c1Mg\nz6BhYU9R0GvPwwO3+REbFDqohFMaE1lKrPbSHTZslQsJjIL9LvV6Kq9twOLC\no1XiJc8Uf/SQRx+EcgWREZYVZPXIDUb93MY1ua6KklNKZeBRE6kfGY3NPkGK\ndlZL1cV6d2yr2XzOcE9mm5q6yR5izk6WaYPhzg2c1x3Pk5nS5IgrGd1UBJ1j\n4RmkxS3UO4SkeTDWSWf1fjpp5vjWxuRMgq5PdlfFxvNluXv6oAL0jfcZosOg\nVhUITWiOKNGbgLcNyxUrtB/axfTxvl+eUc2DZx353M+54ux3aZXahI3hWA9t\nC7jFEvh6DwBcvIe5H5Z0JaawH4gFn1YaoN5gLcqBh4KksM1ik8uqx8GDODu/\nHbw3t0+tQQM8yBslE8AEC2YV6UIWJT77cGlHCS3+zF1FwnCDt0BUT4PbQqLy\nMH9Qf6Sj5hXyq4/EV8PqPjZn0xxYEE5EowZdItcuE1sckfb8tyd0+Fwgl7sM\nxUH7wVHWYJ9OHueTVOvxrRk1Qh5tGPF9ZrgLSmEsNpPFa7QcTUl9VcCaG9wr\ncnX3flFFCNp7sPYuQCHQRvVj3Akv8Ua95QhW4F0ShOsL6j+ZLjZegfJhNvuo\n0T7JS55C2YsUPfA4dUWkSPwgZ1fCkxjWcmr3x6pXYm+3qxPSevtuOlcfsyi9\nPPV+\r\n=N1m6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHag5upYs62vkQKUYfX7//8k08XPyqdefxhNUyWxWuh/AiBU/t/QgjVgLxKYXWvh7uxnmXO2ClNrOKn1rsQxSF2cjQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.758635ed.0_1597425374654_0.46970758723064376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.18d6b808.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/ripple":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7NvISk9sp6ylYJchFVHqF8kZH4zmMsmzAV5tcRjnuFMOrbNf6srwuFtrM5fkUYlEM1hOawZpo8hqE33oDAs99A==","shasum":"efa336fa9acaf821d8aa9a495321d4c5a6de5e00","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.18d6b808.0.tgz","fileCount":32,"unpackedSize":114827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlBCRA9TVsSAnZWagAA70kP+wXbDljeITcZWYMQO5fd\nZeHBS1CzRl9BBVEL91pxbzHsGmFh9zDHpof5fWXVNfKrGIBJ/DFtlLLnf8XK\nK++ZBp3g8J3AsqpsVFrfBwGnNEi2zN33MaytWxtVeJrAOOlXarotzydKGCXX\nMrU2wtqWCghS/PME7eSPIYraq3NP7+VTZP/ND+TxYdF8TSCN+KISg1wUbPaX\n0hbEPktQ/4Rfx/pCjLJHMRlcUnwbKnYPxmJwIcWe5ZtNChVH+iKzNAifj3tE\nul4IBCcmcslq0fhSfWRKTzIfOdX50bn9C095z5hOwlszZX7x9Eai64qFslwX\nuYt7w3Em11vBaOZUDKe0dkuPGpg0E+UMND0uJSLPeuCZQJqcq4R9SsohXJMO\nxRlhWKCqr69ZVrZRJlrOvLgkgcOBi6Pv5FN2Lzj1WJSGQ5CLhAIZ6Dyl6Aj6\nGI+9KbtpLfohbO00ykNyfB7wyegPmMU3QOx1XdAdl/82M6/OvSXupMgPlXPf\n9F1Eq8QpBsfuVV2qXjspniF6aGy2iDDpcz5v8dvY1QwmEQn8JAkCM5YchXoE\nMbcGVxd4pQDSLAl27YYZFLGGt4yj4xdoKNVZNEzU2dc/vGXQkRfjQ/coUmDq\nONivnFj6XiQN7dUPfdehJ39tXO1W6UC3H2n3ey9hJu/UWMQ5nGKExxcJW/nk\nrce4\r\n=bDA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaJkbCMvNGrLrit9PV5gytkfSkqdr/ZcxQWyTOkksJjQIgC+0KOF494ejPryNFC3bPV7KtjN9F3T6n9eAbVe25KXM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.18d6b808.0_1597446465169_0.03706020437382218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/ripple":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q4zqVI2+YWJsrGdc9j7wmFBgr9YmtBOt3Lo4jAp7zckA2RkYXMhzGfd5qQdM9znqAcGjFLTpS6XoWvAiMT3Clw==","shasum":"4e031127f85ecb8ac0189443971928e84a8e51c6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":32,"unpackedSize":114827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwFuCRA9TVsSAnZWagAAvCYQAI3GPMZpqMx6Y/Vqg28X\nwOYrumj4MXyUCJ78v8Dr9/0QJwKM0FPzBg7OtmXWsFbo4SOwGR3wzwmh/abe\ntpQrSQGzbazwDxipTaDD7FUCC/e8sljapCHSchNcvYJ8kGsVFd62zyPLyk7V\n4UHC3kv1IRTloELLw9yqL029eRQq2/7SvR4Mtg9O2fx+FNTklQmsstgqOToI\nC9V6isq3NLHiqLcUTKaguaqOXo6YGUn2NUTTN4vILVuX0QwOG8OMI7wS2Oct\nCEHU6K18+Cr6P5yjMjoo2oQ+EJCg2X85z4DfcUe4UhV/JAPv4rvEbznuh5B2\nx7E5DdA+v4zDimYtl9ZlQ8Cge3N5xoZMxVQs8Wp7Od2G9kqKQIJ/7vyH7bHO\nu2f3E1dLp814mxFo7fiuUqHG0/3zZ8jDU/V+2aVbg8V0VuQ4PJU6BlOr0sKY\nVNLuGnC8ba8CazoQPGGXNTcsGOI7UvFJZspFRq9SPLqn6A0tURFAVttEXhCw\njpFVBT2MgCayz4KvOd1fVowLE4XYCtfeFgitn2l71nrp9ANCvInjBNHEBgVQ\nH0TICsI7lhCIGjVO1ZMkCrr3s21CBoD7MHx7r3pAEe2mwKTbIwGt4T3Rxhf7\ndKCBdNCMfeG73SbNaPGN+tmUbb0XqAU6I200HTsGI8/320SJFzt00BRSBLEW\njQdC\r\n=R727\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2n9T/zco68EjqK39gkMtsZXPmSxp0MAmE8LbVpYH3pAiAoR8Y6mK7QvfzCOrRDDNAY0Dr2Bq5YjCEbcgoWL4xSKA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.5f8ffbd1.0_1597702509604_0.5277178368895674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.8604d59e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/ripple":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S+3o1pXrIA32cdf9Rr1tqCDz/ma7O3u0d+QaU1AuUj4yAH/cS3A5XH3SEEbIe4T+sjCnJXFGfUslHpxoXbvOPQ==","shasum":"89f605c4422b60ec1a8c2f493d58fe1e6f9b865f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.8604d59e.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyiJCRA9TVsSAnZWagAA4WoP/iJnhFhL8eSoNU4crcwl\ndePJiBUjyZj1Wx9nwu6lKK8t3FoKmHEg8HUVYbweaVkHx9YHoOQRCCII6wYl\nzsBR1Hjm8zPMv/qK8nNHdJImi9WGSuogY2jJzKwPOzkg9V/LNgZgmdg+24oY\nLHxXidEk6bufW6RAupTDqlFwm18U5kUYdyxyIqkbso9CUWgqPLUiRrppGCXM\nODEDYAYyPCjrVhUadqr77F2mD78dR/OKWUqnruQ+jVNNfOuJuF5waSSFSuEj\nGA1RtYxTIMO/WkQlJSBrjhiJM3C3rpL3fpDDy4GO/NAVEbgMpjyL9vwwWcs+\n9C+VN8AyvWc0hBxEjQIWF7ZMSUwnSsRKsb2okYQsmIbMsEDAl0cikP0Oxodr\nb6aK+S4x2TZUx1VvhRnKz9e01lNVzcYMl/pi4JcAmv7B5SduswnrLSi+ASxg\nTTrGxeeLPGTfThe9buvdhMW8IGGslxMiyBUpMp+ofpYT4kDHP76ZNolU2f8+\nuhFwv7jF9Isewm75daqTGY8kMk7i3W3TIFU6BHdc92kk0AN5F3ZlAiCmecQe\nA2aaPKjBP48vBfqo43JOmygUUNIf5YWNnm7DHX9tcUN8EF8tWuo8AQnKExPV\nKdomdWAfvj4QMi2TkqJDARlCT9TmQ6g2XqwKEBiZ2dRP0LoEB2uRD13NDUe1\nwok3\r\n=ZJ8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXn3MSZaIeDCkg3lyDZIKRWcSXRc+jrMSM/NtsfqiQjAIgFEF04YHkRweekD1nte8XVaJsU2Gn2/0zcTPhDyUXCkM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.8604d59e.0_1597712521539_0.9134972429387112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/ripple":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cCvgIAt3818tiFr1ugaElWRimRLLle1OPtxOD8GsECsGiZ0sJm/mPxMurB44riYq/jNz7dgtXqeTLYUYqMGeHQ==","shasum":"73f56ed2976e66fc1262a157dcbcf54b59f1c854","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.1d7d5e34.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyoaCRA9TVsSAnZWagAAf4cP/096/WjM9cSTIlguuHy3\nMZwajChcjurVxrnxZX5aH20x1YKU5Agf3w5PTt8odL+NOHHZwUWVW3GzN2+B\nHPsrJVXqSukNB+FEJxGS/aPyGH0NuM9XTmhaiulaPlI0WcCk+97gR+Bf3f61\nUCIF/rs/P1aq/EcZk6T2ltyhjzF2m1u69jDh1a8TDYX3RKVcbKEtb9zSrFII\nJ7m2fr9dPU2x+Pb6aREIimiWrhZb6j/Xt8oecCc1XOB9Pe99qsRlqKXBVn+W\nLLxY71y2CIYyYE1g4FBd3u4sa3s3GhOeauBgWN6PhtZJW7JdzdIKdesMqsNl\nTqCTDh+aOfYDIqR5TLht04IaFgijQdW+KGmv5H6wgOWdBX1RSsexr6dBMcn7\npalv8W3+W22B6ynNp52IBFydVgT0FlVGXGpwVMU17Jg6dP9TOYaBupcnDOQc\nqRyZp3dCVq84y7No80AyWAfsB3KO61kBkfoEy1c13rdZNsjmfxGxnC1CnFNn\nRH5eCUnsa3FwYZ5y0bQ2f/+yufftiknvgUx6mzyRVhyBvXVIaO6v/ZeDpS85\n4Q3KFb7zTDJhm96/SnAMjn1Hud+nEpBebfd5/V+lrnFEOX9L4K2HCL1YmWGC\ntrsedPjAFUITdKQCzCAGvGbjeivYWKgkMSvivNidZWhVyNiidK9yijooyzj6\ncCBK\r\n=aJUA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp5b2En1mmKdBbx+rcFPS4bYd04KK45cYnwwSExl0mCAIgYQs4SKLDQKzrU/o/bYYfhOONzhLLdBJrN6JjNDeJVqM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.1d7d5e34.0_1597712922240_0.9709144602988191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9cc95c07.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/ripple":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iux8AtV2cv+QweplA2qrVombveYOlIlNo5iLzaTV2bt+kOyqP5D5egAhgNkrLrzvC+yOiBzqRlC8dqq//4qt2Q==","shasum":"01f3a768084816eab210aa26274d954c54ebf337","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9cc95c07.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvhCRA9TVsSAnZWagAAwKgP/ilExSlfUI/fO/nPE1MQ\nwhLKylGQvtD/pz7cjOcpOerj2BDpkIZ/5ZwaDz7IW5wQ7Rya/CGN/LSG5uK8\ncHsA1FbPCjr9nt6W94iomhvnYXRaUuzDJATi6FdEefLjBq8RTX6yKj0jFiDl\npPYpd2NAXBknqEoy5hO7wKlF+sqvUjmbCAQJxyxvcxsOlArugdhAVCPEQ03k\nWNxVD9cYHrQsqt4I93CIuLfepQZuoplzV3ovox0ASKEM44+TlZM0mmtdN9YO\ntNeSdgLPQnWTXC59vbrIvN7yB/cNvhbZG7c6BD4fLbC46SUvYZvI2NkQy9nx\nRFPfzFVsdgjeZR3GDydM5lIlBmc2EWBLXTBpKoXlptOAlYAjcEkZEN0I1juG\njmuUoierRI2m38pj/1odKo7x1Do2mPMb7O9ngGaPumnFHHGidLSKOEfLhx9c\n6DrPtig12zUEo5nyoGMRta1Wz4uJaf/CMxI3JIO9waOM6WYiFTAPfAItH9Xh\nT1dfYscVhXZuFZ2b8O7D9tlcy+zQ2F5oqlDKgfG4tXxqvvOixfmi3kZslZdq\nucJqfnSypcE99tyMHvtmQ/g4ZxIJBPilE8E3OPFd8bwFH713uqOWEFhP1NJK\nf4j6HY6KcWpL+Y1VDnkzdB/XVUDBYMxstXbWcBTHIEY7bh13jyuH2w0xO3Ya\n3NmF\r\n=Joa3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEd9+3Hv+ago355y9HxttnJcEylfOm2cH5Av2c/RkjcPAiAUPGEhoR5XXtEVJW3IK1Jy3FWsJlh9agOdZi+Oe2AqGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.9cc95c07.0_1597713377309_0.5685117227017003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9f65ced3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/ripple":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-06HGNK6x+DvF312jFHOgrECzl2vH4uPGXD1Kz5jwe3H2HnZyvlM0vpvt6noB1r6lPSQ1hNYNKBzDdimzgXmIlA==","shasum":"64e518278df269c74110addcd3b1e0926c6a7680","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9f65ced3.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDbzCRA9TVsSAnZWagAA6ZwP/iMRjAGEzbaaNtTTFXZe\nt6LVduMTTnPd6TUe5GPAgL9C1arfjr1b73c0Qi2bbauCoKkI1mY96MypKZf3\nHkEuRiXv5HzPwX70uInMzSSewo00Y0KIg5o3Y3hCOOv53riFt9O2lZUl479O\nnHDl97qhUO916TbMV11p+hZP/XmDf2yevL0AkAq42c+v8uFIF34kYJz06wKV\n71XZT55EqKsGesWH2Ek4/eP0TjX+q3XFNOLvWGi6C/ASwoIuFZX3pfHC5pFi\n3BZvjHIebD3xLO2pfsJsPhu1pt6+Ke904+9EgiBvWaVDRdeh6VaY1fxe1Lzu\nhRMlROCFf9eAVViBBqXV9FFK4hAI3qmE/rhjuu0n/D4UrVhXRhhGnOWyR//O\nGTzzkoqTbWLLX6qprgmHcVzJGazSycAN7hVP81WC/Ekx6MI4p6ZewNcCuX/d\nWFDNExSyA8siR8izui0KEXr18+pn4CUB8T4kkN6osjqS6NnmrEDR1z2/QMwD\nFFkDSZxrwrXecM2DhU1i6ppxN6CQq21f/28x5SY47HEa95d+1f1C2JXKuStx\n1LkJ44YfaryBQ5jWQ9pEnO6g45GnK4/0+4HTWqAsSWFlqJNzgLKFmJrGI/y1\nbbAv7YrhUY8q4wqDq+mPeZCi62k6Lac8J13j85z038TMjK+MD5G4wJuf0rIB\n9JIU\r\n=GmOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGSdvFKukNl6dR2Gf5HO78akgXDG34Ri9siEYFCmTb1gIhAN+j42czXUqbr/SkqjP1xMhJ7VKYZXrZDAX+kXbLYVXq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.9f65ced3.0_1597781746938_0.8168973544336022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.5962b365.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/ripple":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bdZlcn1AINLsRCsBT3EJ/7g7aYY1mDiOqLq3QD01F2smH/zMSezvWQdwGKPyW2hRADpqZF7rbWNu4Vpg5RIOLQ==","shasum":"77f74abbd0edb54c3aa58ad6af4f8893066d5c59","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.5962b365.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYtrCRA9TVsSAnZWagAAXQMP/jX/uY0yDckHGNN5lr8G\nTNQ6XqPwJv6iAwbifKUq+pJnp/lL8WtOeiqQwD6Wp/fNqfOCSipqI5GfG8Sq\n9JfDPrqRWbBPONX4QQRgCt8IgUlnGkOQSt7WhpgMT/K/wtr/UurlFxdeXboC\nqwczht2zkLna4ibL4upubnjRurOEQmFL8nxG6+LGB0VveoMGKWmHJdV57nEv\nNMe9cQJ6do+eH1AsgRNFg5NYFyk39eN7aojsWqLXQtHOngFLXqoiWaV9S6lY\nx5Jd2I+bfOyCibavJCClFtRejf+uMqKIY11s2H9KlXlVucmsElla+uKxcrE7\n8L8bIYQ2SBTqQ3pXENeEseiieaDiYZDdp0+8OWlMLaYac922IPs4P/189uZF\n3rNMfzOcD14DGm5Ch0gcEHAVd6QrhRus40Q6H4QPyLiJnnZ+6RQMfgZdRrlR\nVh4gEeJR7UfcLqpIyb1M2m/EsVArBUtd0zCL5Y6Cj7vzKFGkc+g1s3zEwaY0\nSDBoIn6Iu1LhXP2CCGG5Ri1pN8J1pgczXTATW4698RF8jMKPk/O117D3YiVO\nGEK3Og2fAT01WYn+cIu9U3DQB7S2vsUjSVukGOtedSu8Rf3QM8sE/4GTk5R1\no6u3XiCxA7J5+Vxqa1rIu+yTGQLuMstIYq1qcY5K3OsDT26SJyusmjS4RMuH\n2dTK\r\n=3B3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQvkERlGm61jL9R7QXPNdyVdzD9bu+SB0f9zrudtWr9AiAUfhr5ETq9TXRLUUpIygLA3vPLmkWAExcPpq6Z2Dpnew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.5962b365.0_1597868906636_0.3570434753019174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9c9ec756.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/ripple":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cy03MvwrHWm2/3TIILPssRT/4tPxwJa0JQiagzpx0JpXIzydqd5okfqwuoWdLNe2ghOUynqyOjbO1aHCkLg4Kg==","shasum":"edebfda6c1f43743bd144f19dbfb0be92e6ce596","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9c9ec756.0.tgz","fileCount":32,"unpackedSize":114803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPscmCRA9TVsSAnZWagAAc10P/Alv+SKmrIwEr+ps/5mI\nnhaBV5OxjMNCIosHmpbNkSQrOs4qS89kfjnuh3WmkR8EkgV4DU2U6GwIGqwc\n+32ynUZvqaxuaffix3x9VCI/rVgAdLUp8lwraQXgDKTFHkUpAiWEIrPZM5pi\n3IZulpjcJ9sk4BW3zWY7xnwfeolFV5fZk+0YBNdQpF46XtGPLw1zLQcsQOIG\nkjRg58YWS76wIpqALzatexRec2vBfcDA84yWswHEqlzvNyDQ5Vvir7He6Pgc\nmR94hLI/TP5eW3wWcJ9bf2EKrfDauutgbjuAxkb96a2gw7NgqbvOgnWdP8sr\njeIZ6iyORDsc94zTXB4fEhJDh3qA84w2SvO4yyFDSkUGL0oQpE4k10RpOcnn\nfab4qcCS3W//TNxuRhO0k2ym8FDp+zkchuCWUh1S4fNzNoqj+8li2wNnFKB5\nJDPqasBZ+aOfYPIR/igemCpwrcifzoEPdpEFkP4hItUhZnw4CabSaf4tfTiw\njc0RY2epHgQ4aWmWXEuNxESdF+Jq0S22U1ci3czA+CPROv9xmWpWCmW6NQ1n\n7SDMlEcAzBDzCIlQhIql8GZOCeutno4gRrIBwzj3eLwty+BwtVSvnpH6k2jQ\n7+zGYHf+NfvWyDsL//t6gE1o0gKJHZ+zbkvyiXo/g1QtleKPjcpXcgrJ7xm0\nhcxG\r\n=qEqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBiYh0yA1jjuizWCYpFW0AOlRS6KoNbRLgiluTJJsE2AiEA3QEhMXvGskJ0EwR+J1K9Imp2un8Vt/MRSrsIBv9//hk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.9c9ec756.0_1597949733990_0.3535486019114098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/ripple":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vI3cgPLBEKXQAVAJ3MgW/Lsm2jAW8fPbn9nkncSDJ9/YHM/gkdJsJadsip03A1QH1MikRln+ciXgy/B90rjqXw==","shasum":"4573b9dff5d6edc92e87162321134860bc8355fb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.fa0ad66a.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5jCRA9TVsSAnZWagAAOZsP/Agx39qwSekkQ48+ewyq\nfB0ISeKedWBd6lwzjH/gzsX0BwYhICtzM0aJ/yjaaIkc0HaxA0vCWp7NPwIR\n+qHvukvi5u+/QqXXnE1YhpzbyuosJTRzTcupJL0zADKf/8gHpLCnw/J+hps2\n2VLskh1mhBVoUZJEYizsGRf+hzpgpl56stapzI1ZejUvNvrUqEjmPl92q3VB\n5jklCRuQcY4TIwQ8EPoAH9TnCbGc5cMtgrsSXhRz43qDzX33kAD/OLkepNAM\nPsLV/iHK9UHgZ5Ab4KRCTyi5RsVUQY0VAjV1dpxcq/D2DJh1IBTZO9jrgD03\nIK9LeFFtib8Y+Z3ZAIVYCHeJwIi2xzPXfBaGXfNxhjatrjzuK0y9f7mPxb6Q\nXI8pv60VsjkNLvJ506k0aWrQc3e1HVtpTZn8DejFe2PhRIPdkIBh3qQkLnlJ\nF6mJmMWLIVVgujO5+xWzLnvffr1Ty/twn6KcEEfucNI+LygpKnHZy7rt6l5f\nRhXOeG2xSknTSx7FDwflj9iwnEbVqqupQyAunnAGlDjWw33OOtJeOwDZTfDG\ncS8Dds+r6fSCrdaMOEMWzU6SlEf00EY997OykrI6EidjXMPAlKKCmL9Rd45G\nBmU4d7B531nWiRzJV42iGQQ8r70YIksZesonKEMOaUDxalmuZmYEhIXXV5qF\nsqhn\r\n=6hN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEI1ymu6FCE4LkGeA9JTJuXKMY/EtY18vpVwhloLrGYAiEAhfEZrpP7pQknephNWW6SVVcw+sYO9n0jU+ogAIOVxvc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.fa0ad66a.0_1597955683219_0.40543671853416186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/ripple":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9Ap4g4YqB+qGQqrUPesXqzdI67Tqe5E1dPLkgebrOQliWrlQSyGr6DgO4arjEuTsfExuT6YSRY01rXAVkA5kxA==","shasum":"30d8f6b1e5dd0234ebd1710960421c6b1a7768ff","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.06ecdd6b.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuw2CRA9TVsSAnZWagAAIZoP/i+Pud0Qv2011haxBMLj\nuHE3Kqw5iNFn36W5ILMjEVTBy9dp61lPDW260eLvw5Cw9MgTxlhiu9+ex5nM\ntyaeDe2w5Bl9u9MST21hhVjYxInD+oSbd/LvNGwh/E1VrrOfrvyXiqtBdSrd\nSGBR/sqiAamksrmg1KVHq0330la7FlMn8bH+MN925wUuOHLGtFGagAnx2O75\nIC7Zhebu0+47Y7lPJPxisXeBmif1JF08Vf0A0yEXeoPtyK/uHsNJfFhTLbfa\njCk1jvUuZBEZGjMGkob+gcGIdcWzSU5fI62iRxLVGZAxMd1XNge8nniDSWwR\ntAbkJFEwKssnDCwEwEdUVLxjRbbQ1IgHkLgaaQYmvxDtl+Z68U/iXPaPzQaQ\nOJD0FxGaiMCHtTdyfIzU41Gfhb7eLn5kExBAWCnE7gxHYjHNVZBp9dwb1y03\nxO0a6F3f1XBQMbSZdJdM0x2Tlr7LDgsw6L1lAonoIJ23wed0izpxA2pa167s\ntlr6Hmow9fPAKZrq/Zx/C+ZP3TTiyIu6SZKwcwwON9uFYrArCgVptxNuXUNV\nd0NQAWBxtEkLIK7qpFL8fSy01fRDnaAcuZVsWz8/UkxPMg9yJHMpqGGYYOzD\n+86lQGEJ4aog/o07hXh0pXxo/kLsDBPd5xWKbU48fjcTVf0+0zrUkvvOV5na\nJwNg\r\n=tm1z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBrWnlGpDpHwoI+6N4emIawNwLaLWIDj+PEDOUR2aSRQIgGN2jlpqxKmhWJrDDv2uKNM8yKi1ucyu26IfMr/QU9Z4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.06ecdd6b.0_1597959221798_0.3995819848569968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.2bca2318.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pk9On+vSbwY7LY7OddHMIhhmHtqrNKAO4Dw51vsB8olFQyPI0DiYJTqHUQ7ezTKkludHtNXsWCRhH+dkI79cjg==","shasum":"ec7aabd167fecf13b8891754b7de5c5b7eef492a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.2bca2318.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnHCRA9TVsSAnZWagAAIy8P/1SwT4ex2eR5nXZ9AMEw\n+YgpTATdD7/nrF823TEZg/7Ne4y7jRyH6j4M097NnRm/PSwl6LTPgrA+z/Iu\nzJZv+lgAbxK6z4R0gQFK+T3d3JjKLQvskEJuAiQVcqzovljIfRR2k212AuKT\nk1ZH6Y8rc14KWTckXhdbpkUd+vakeFoN3rJ2mBU5Ye+MNo5SAhNfXPEmMZRY\nHqw47NE+wDl+PbKCrBvswaVLHUm7OtScwbcYBZgv/Bz2Eii/MjEKWdyy1Xvj\nlZgQMBLZ03V6zCPPa7OYpzCws7FoZqiAczxQArYdqjWHq+hZpk04Fmmg5iTh\nIXenFCQMjIaMPLPrNbBwN9Yiu0rL8ZVTPlJt7aWO5lzTX7EhF6TTeqYlHOBf\nQoq/uHOctJ+LCLBJLiJoYmaEyaeix6ieqoctQSSeMD61xkh/zeWrOeKatW+J\n9A0RSSm/V7MhoiVwedhNiPeTsevQfpB56yysVUiMUewjMVRhmhWVLyZkN+rL\nCt83exRKMXbcFBhPsXyeTCLzdkYPjd3s8j8pv7rm6CcpL9+4BLucCh3OGKEI\naq85VP4yP2hMGhz0mJ/fPi1Is5fskLS6O3ES2zwnQ7Tm88UbiCvz454xxgxb\n5d9ykpw5xzXXITsNs/P9rxv0YcremjqRtG6QlmksGu0+gsVl5qrNNPpcYP7X\nJ/DX\r\n=JkAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGre3KXJ2pTcWaZ6Fj4nGnVSohhlFB3h1ZjoLRZPXtDgIhAPmyy2bHsjPavScrAsKiUBUz3uqZnFwUU+ipO76pC+7B"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.2bca2318.0_1598032327054_0.7431262426080716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.6aa47265.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-b9cXqWPRLHYmNCqrXt2rJVQMd71XBgqcoZ8nCXrptkAT7ZqynybCWUjvruKwNHcAH3fhKi7eV8/DeCVTtNsy0g==","shasum":"a575438e1db64aa44823aef245a5c6e8a718c00e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.6aa47265.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9TCRA9TVsSAnZWagAAj+kQAIX8m2nKXL6uhGWcILRN\ndTkuZ0gFBiiMuyLAGQJPDBqoFDXFWod2FCUamaSa6CKP46QaBLwUBc5Nj76B\n4yjxSNKhDzudM0h3tAxRDJaFBbIhVHTauVtlmKZxfZbnAC3NDX/IXMjoFtZ6\nOGdfLvJIpZA28leuTMCkh0bjA+vM5PkeSNa+ipaIOu6Dsybn9B8uDOJHkyET\nPtmsTDkdsgXHGNOH7F5iVWLnLTCT9V5Y3fNrGVaaPNmYTZN4rElGvnZLftaK\nHRuJEhE/biWoNY99A9GlrVmC4xpCfcJ9BVuvgriD59Zju/TVcOkAq/svXIGR\nr3sB7cdRpzsjdnf0TMLzqIwuUpMw6HWIRC1JINsP9uJFZra4lmYmHvXJwVqD\nVKOL2RB/mLyAAqM9KfkRFiZzNfPL/gOj/5oWWAouaFfvxX+nSv6WqpDaivA3\nMBay4ksQs0oLQvZLNwAjrlul7JxMN8ry1+1sipjVKkDvuR8REJUVsvSu2guw\n5hT1pdGi0F7bsB9LUuj854nlZDGLsDaP1w8vNjvJVMRT1ZXoF53mH5BiC+mm\nr0o5b+C75HK4TtOKHZJHoKd4RBECy87cq1Nx4hEMOLG34DPIpipWJNID7hkq\nToz4/5xcr2sEJdh5/ZKUhHU1MxzX615gjj8WdcL7/xl5Sj4DZsNG8z6qRdo/\nhQfH\r\n=0i9W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGqwvLyJv4NMGiXk7xuPgAV03+Y2ra8WtUy/kSwJMdSAiEA9aqGb3tJjklg0eo3O4ZoDP3iSnZjc9cBTPOf9w0udX8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.6aa47265.0_1598033746951_0.8715890896575331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.e7202a07.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IbSXTyCuPdnvabvJh90H9reyvFK8siHbIxUcq+4vWP0KRlBSrNOKoHU5KnZMEHqnXLQO4LsV4QZsWs0th/LBLQ==","shasum":"e00237f7d94c5746b2be6b9b1456b9767957a3be","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.e7202a07.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8jCRA9TVsSAnZWagAA+UoP/jW1N18iS0avW6tmULA4\ntjiU2ZZawiZhkDA1hTKDUtlsPRcFNL0ovoZnghsuBqzpHK6suYtmUraywwFc\nivrTvzKAUjLZdj4fdaa1qcxbV/8NtTTrV34pfWutkD6Ok5u9VLis+2uo5zk8\nd0DmURegDtKsglSU2MvfBa/MfDWinBs6QPUESZSumiclBzEYPtamWBntUPPD\n3HP8TGGE2ICH5bI/lipXEgOAK68JYPjTBIRXBYJDYlGG9cM4jy3faKBZQYio\nyAZOSMh8czf+0zDJ3Dweot+8c8vhssDrTrcE6AUqad+49lrvrk2BmfiROkUm\nWh2abUdAbGUkLKvAHOk8rNtNAp7vBfBQCtTIFcDv5F2/UfLK3Xx06nAgR68C\nhyi4EBPcvkwP/CifK5cb9EEESlpxyYKtwB6Kyl2tJFaFi/i4js0d7YkJZKjK\nXig3usKvneVC+9Yg4sMofFuPUAGvB1RB1LtxpD6azgP2btyoFL5stB6fxXgA\nHXMZxN2Y37JsLy11ulWb9cLCVNwWv4HC6bdFFndlWFfF4HlLHBWY2AWno+2N\nC5/JwOtwwGwfxrq89CGrmk/24swySNyRz8jp8KyS2vvaTdkgZ4CaDpB6/jQb\n+2g/GzY1+8iAWcIgPW2joK7/Okjb4RDOhAlHbV9oIhn+J3tE+wPmV0tF+1tc\nTFo0\r\n=v32U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIudKuPxctvMjJxGRR3hAMRVMVaSfIHJtLyDC60MEMIAiEAylmfIh0kQSN6BNDlV1oN7RImPDixc8R5Qdt1vwuyb2k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.e7202a07.0_1598037794790_0.598279398043623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.f208201e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/ripple":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Xo/nwm3SWPSHOaWJI1JGH7BD5z4e3vLTp5aWCKAyIuOy4u53BHHOJkO+H22T/fBzhVTuU3z7nIu4lpx2FhxyqA==","shasum":"7fa71ecf7b4e0e7a14a69d7fb71568d93db4f213","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.f208201e.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7eCRA9TVsSAnZWagAAdx0P/Awp6TMAmextfcEKyTpB\nhhmnrkcCXdCMKFHIxSCXU868GekMgfsSOy2okKq7zIkqbHUztXbGajEQgDKq\nzf8InUeY+t6YnLdeUCK3dbovWlqUj56H/QE4LWLsFuDIUl59a/epaYSwlbSX\n/Cwng7Z8bBH67J2tto5sDouO5t9YM8oaXsRSi1VlJIAxz3tcwDWYA1afOvdC\nsM3ZR+5a1MuPqDPuxjEjv3evgBcfYErtuyneHm2xRtuxr0K2vb3AzEsciVgK\ne4rwelpCuaeiYLAQe6TvYiS6yTb/dXIzTAbwB47AYputy/UeNddScbPdUFrG\nvZBQxnXInwGR1J7CGzsUbMgEcIDIzJ4timbZPdbuIfpeLphzwhJfGt8f0/3B\no7yEAgIhGxBJ+gVxlY8B8CzJbM9EOJQCpssMWLiapSLj1zdFtxPxbMi6aWbm\nHRVV6XrCJUrmQnNVLtDfHL2CkwHuuXxXaXeW6GyIFDJQmAjiG1QF/IQeb6V3\nhYmsW/D0r0WOxK8Fef+Z7wNXiyszUNSCQ4v32anEuhVEN1QbJZPglxq1W22F\nw8EPSoSYWZq9rpfo44paHzQzhQGvIhn7w5orfsWAaeusLSIBsBRMtz9xfpqH\nUekKu5Go4W5k+fSeNrsp6d3j7qUmgnE6NiLBFSNZbOcHlJVOyHHqs58BQQtE\nvGCx\r\n=f8BX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAdTCF4UYgyXv1YyOV4ti9N4Tk5yI4qpjdXBh1r8S+GAiBh2+wrANoEMw466pFacqZA1FZMkPfmLVM+EzccZqeRfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.f208201e.0_1598295773887_0.6918938761432074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.14a172db.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/ripple":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X3zfSvdjowBaA8bo6dibREFmuhz28xWiKm6j4ojgWdLJDsPhjF7P7Vk4JIzXifidcNcAy9bKRuK/RXRvj2qsiQ==","shasum":"5f3fca7a96529c63f55217b34e489ecd4f337943","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.14a172db.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrOCRA9TVsSAnZWagAAzWAP/RjpPO+iZ2EqiN5gcf7E\nvHZD0kOiTGFrf2k04DI/qaDVO/y4wNZU1vCOSVhWr0mZ2uHKYu9qubtGZPi2\nGjYCtOpznnJM5fCTEB+w2czbXEBVJP0BeTnduiVosgAlEjWh77aVJWkhB4cg\nOfAvR7Er0UTmc8zobB6jIn9b89BRVZ9wmrUO16gVYJTTn19Ks1XHOnoNFlID\nNlnIzYeOvxuhwSvnnnLd2J669Y55EShj9aafY+sYpuX5JyOuLnHCTb9eM/5O\nn80rz/03uegYKBUGq4WKpCtKmE0wC1A1cEQSvWfhTedj0b5jkdkYFh41JeT8\n+zj19bZhZZXzmPfuHFMqmRyfg/d6ITNt+u8sWW3NWAVa54r+ajVl4jALEluo\nj6/kD5lH5zjVEVmzl5Z4oCa1h4pthxqUVXoO+TdSeN9Qg3MHv3dwm8iCy8Hl\n8/k40d1hIOF/DugKNJ7DhmLIfwrmT5VHu/FNFj00YkVZW/OhpK80kv169O2E\nEWK0/YgjdJl6ajLSAaazTD5JlRXVQmtPbVg+via4gsRYmVEtyLBZ9exbFzha\nvGtljLVz9sBeMyrh67sgfSLdVrE7Y2pyzYcGNs2+saD+M7FwqiHkJ8psuRqu\nqQ7p0/FV6kbRY4p+r9ci/N1cmRWzjVq/6dtp20IutL7FfDtx+UJyonIDDs98\n6fCf\r\n=SqyX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuwgAD5cI8Zc6H4pKWIZ1FQgqqLKqqyZsjN7cKPvCkkAiAMsKgYw/bMopfVJpyx5xwE1dWsPdTCg4R9uG7LjlSpyw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.14a172db.0_1598384846083_0.1248613849575928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.e6c1038d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/ripple":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0E4yZTqaRcqWTnDzDgc3wWnfqbrewCuoXr1slBltIbtOtAir7FzvSGtDtdFzDhA+SnO+ZF6IeTVD3Em1vIrwcQ==","shasum":"470ec9b4a104bbc751014ec25a0f13153ae64f7f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.e6c1038d.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtNCRA9TVsSAnZWagAA/UAQAIlsrve9sSSemm/dzRNr\n8vRYGm1jo19ir7nQSfWeANp4Raogk87QPMkwgCTiYmNvJ5z8GZv4pMk99dV8\nrYgACCzJX17jRvd3v7tVl1tjJLU2I/0v8miJm9uMmC44j12tLNx7q+JEpwDO\nVAZoCNKRuJcREYoYISRBCCevjsPPNuroEfqJjSKmLCwFlAFLHWtPU46ofXsC\nUrW1lBYbzgZgG5Cb8S3QqkA21IwepT2BBdAh++6eb5u6u5DYQiZ3lJ/RBZqO\nCwcju1kMMtJZNWvurrpfi93MVEonPKviADsuyP8FWNsUZVdLjwBE7lBsha4l\ntno3an/UZl/7hlVxTr1srh0c2BuZw5cl0GF4t9fpHAPaJQ+6DYDDdOGF9Kad\nLaxX7rYy/ijuW0jkrbthtfXLJQSWOlntGx5fJVEpebA1qnik12WNeSpNF6pm\nXMHtxKIvEmOXhxkGjjfw4jfcp2nYZ0RxhImCsgKoN/YO0WkvI+pl9FihqLMr\nP0Xf3isOsUt7W4eR69dJi9ViUzpJ2CPnQbiSri627b5MH6pZxxcZ55yfyX9M\ni6RU6pnp+zOiIhXcHMscbGLOdHDa0zNhtROnKPyI2/7LNCXWqIjsP1W+oPLo\nSJumWoh/z0/C1vaLXRqCQGjgvC6nNLcXWeEF6YHm7CXYmNBOZCDweFcTpgGt\nnrkn\r\n=eIqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcsHCh5lng03ivOVCrVAm2WrQ1TLv7pEn6z9P116axnAiB4iGJKufB/+gI0gufEil2ZcLYK1HatCmMe/78bRTfGVA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.e6c1038d.0_1598557005071_0.7446921672036115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.34012082.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/ripple":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-v7rcgiGx4B4v0p3ew73FMnKC7zWD2ScI+VLANlVbwH+tSmpsSbLuNlKVvE88rkHrc6M4kjvueGG6m+WHoZkonw==","shasum":"75b2c644a8394166987dacfffa2b7303ceed2547","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.34012082.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3oCRA9TVsSAnZWagAAe1sP+QFDx/jqPdfW4h19mkf/\nA/PH2EBywcAf27OkmOrQMgdfrCbDVKo+UQRSsLzyAI49enuv+kObXgMwJmL1\nSVYSya2KmqQnGXbrHqEE+H/XH5hwqPx+yqHLz3RwMTl73s/ful8R3evgIDei\noWR/ekzzJZACba0ovZWesDK9KZgZDVHYLMPx+XRfV9fl7ieRDN20FnJdHo3U\nNcXBZj01BOXBu7WeXgQftf/ee1ey7wp/uQugxkkr2b0YIvGDoqrik6gNms2S\nmGYwfecttr6VItCzceJuGuyidAkfIk3/abB3bR5K1FtQtN0oqsUhcbsnRT/c\n8BehYiq8Dd0RLc0LZvqPDFq2c7lXm6YGHA7YAtxfTK2gdBaQQ/KjV2tDwNFq\nZDxHR4LoodjMC2nzt4kded3eY26EjsLX7DgVY4Vw/iYT/95I7HiklRe8vlCa\nTcX7/rtOm2vzygxyNBo+/p2gK05mqiI88w3j6LbDW/FnUNpPu4Vj7jhM4P19\n1/q/6kF3a/hkWykVCSCnHsCVn+C5BrfAb2cTey2udAUbRpZs8fJ7GFQL1DJ2\nJA+7oinkTjZLDBeRxEyRKgOIxnIyeII5USg7OLGxfj4cJ4CEDeHi2w1Zv9Dl\n9+na6dGZK1H5vdgvDgUJ9PZd2fj6T9bjRgyOG1XhshSIUl6YOvt1WG62PFxo\nYIHg\r\n=WXTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/0UAlV6kgIMXFuSiuckVlxDrwxfmk/EvYOMIhKzGUrQIgYzfFjgSlzqU6L36C7D5zovqqENvdLeYi3SkPtCcBoB8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.34012082.0_1598557671694_0.3849386846148688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.c073f7b8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kgHcSPlV57gnMiWPCYiqokoDrQA/4p6Zd1LNJFNfifVJO5CoGhbpHmB5L037G7dxYjiI9tDWwDf1mLVFuo4a9g==","shasum":"e104a476f03b075388f76291dfd12c63dfcd796e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.c073f7b8.0.tgz","fileCount":32,"unpackedSize":114857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrbCRA9TVsSAnZWagAAA4wP/2C7+ltNj8Ix4dq60JSD\n1VVnTKroUfCApMoqhe47EAM26qyJT12ClCl73557jqmrs6tFOEKTEKpkQPRK\nlEHbNzT+yk09vAWE4w3CpZ0sAygE3iWVzF3Oi0SICZfekY4uM0bsDiP3Cgbt\nnEICqxUZB5A3ItwdJxK/MUXJ9AqFjXIEqykFBLWt/bB2bmjjBSk5/IErwpdG\nlKkmjNesVVPTwJyH2akJnvB+NGdUE9aIneBRwkuOvf4Z/78pmLzAmlcLEuhl\nTGOhg56o9Ug71QxHYHVku0Dcb3Gzs00Bafx9kkTTDUc0d8GAh3hHIqd7diNy\nJ6cicuzmQmMEutZk1LeIbrHlV1WdZLfWQlWGLvfT8CeYSK5Yx2g6fdiJrJK6\n/4JoMJkfs7bvHT5Kgf0WMLrB4IG3DAZ0IfeuXLLYGk8xpg5c4wrK9QY+pT4A\nioGXljuB/np/D50lT2NCa4zvkybNEXxvV5M+ZG/5WtsuJLNwYTibPFbYMs3X\nI9dIDqaXKmG88xSQuYTbY3MEsHT8xcwDO3IgnWr//c3WZWJZexO7B1JSPOKW\nNK/dSt0A9Tpsip4RIlCKYccjHZTv8uOERI+DC6yOANTtOZxwFT7bp50imEHM\nH/85Q/wchVigNWad/DN8eKMJMWd52gGxXlqENk0bi9WKiVEKxeP4n1th+xtQ\nDPJy\r\n=AN3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcOFngho3eW5qcWizlp+VEkOIC+f1mXIcVdUj7uNMEVgIgApE4iormvqbQC81JwolO7x6xyTxhjMtIJ58tn/ywl+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":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.c073f7b8.0_1598634715151_0.04043726287081717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-28FykcYIzRPtAUSnc/5wYvyUxWhNsReB1t8VOSKjH5p4jfxzn16PrzMKyifYSq9cbRbDHla42Ia4vAM/Br70dQ==","shasum":"a4299178c07a5baadb138ffa89a28b186252a417","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.b7ae68ff.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7ZCRA9TVsSAnZWagAAeesQAIkGH0YKjm6LAyerViAe\nzPK/wFgf1cQvZd9J71lKA1lj/1+BbEHroIsj4w9Ifs4D+rUPdB6rBKZ2WpaI\nU2WCvFkuEWFAH/Dyfvmyebe/A7YvhOluXBAH5cM/NjoGvPKlE6sIdmZbhtNw\ncT278esMKFpA/N0uVB2n40hFmCBny//Lut2Cy/jkJBxsIZTV+PNzPps0xiHQ\nCM/HfdQXg0L6QyitnR1fRhsT3DExBUCXpqQIZf6TKMwinVZA22ALi7fDAqXm\n5W/6bLIF4TqUijRwUqwqh4JwLejzL6ShXEW6xddBZFHKTBQvyixfLK+IoBpA\nCodUGLSL32CCiIiJHseJ1mjSTCwoMbgb+TO6sN2HixzsqzR6tGmrX1ygHEEb\n/BqfbLPEXd+fbPBLTrSdES2A6Tv1xrCrvo6iKtJywWij/FD1QYYulic61k19\nmKX15yGDO2IZBeVKoLvNRxKzVhwoMzRo9npIbY7Nz3/h6I0OIjYGw6x44Zex\nXtGOVl/WdeFslJiE1qcMg0Wx3y7AjqRzRyCEDzES/bhQKJD6g7Hp+4t8HngO\ng03ftTcQlFqwlcS8XqkxYFjipfi1R8REuQMsmzyUwIeEQBN49wzG09xoWrAe\nWkUkUAb2wotv97hBKUL/PcrtF05sWmLuzTaFUIcZcZL2yqNt4MURJt49gi7j\nne68\r\n=C71m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEl4Zv9xXfgAsl7pPJzPmJRc3hlvZKZaVCQe8tZZq3VwIgD75chU4x0etAi1XV/5nxUNSwvGi5tEZ+AaqhooqzPdg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.b7ae68ff.0_1598664408508_0.971103677253822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.697e3879.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FqYsUoCFIuCfHnkIsh5NTilubtXHTt8t3WWVtREQdJP/umd3+pOOgI8GF6sbgNYTe96xsk4yqua7xCG8baJynQ==","shasum":"16a709aa2e9cbde356d3c5c474c056a8900a5c62","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.697e3879.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOACRA9TVsSAnZWagAADPcP/2C5jUhVrDV3+FqbZBHx\n/mhJsZmIUkkav/OrNjW8tsk57nAp1sUXFwX1qZjLC5/x1lOGy51YxgVa0crf\nePyqI17rIPa+Ac1aVt33X2VgnKxMgMEkgVrSN/WFV8+VzF00+yHbOW1geVKp\nsuxfJ4Lw9p9cgPOWAjctRFoH7dCGUp7TObYyKpNBSp7P2YBeQQ5dimPlatNW\nmud0EzST7hQGENMdhUIa5EaccBHd7TPkJi1sQ5tapULVdRnlF/t1IigzxgiK\nDZH3LmBEsszcRAxDsrL+xrXVjzI4hOuNRc8ejxAmriT3TNc3daPRoKqnuyz/\nWzb8lEwSkABred3G/R9s8hSjpGYKmgRLx5/fFDVGjwh7gn7xpychMIqg0WzZ\nIe7DblxwY6aCuxFktlAk6XVADObUS2BM/1FzwFCzPS4OyoOIty3hiYpa4/OK\nLjcxDmOyWdfNIVtna5ko9aKzyTHINc4tNxBHt7PwyDRU46f+KY1DWFuAEaTm\nrD4QXkNfJpWdJIlHc7ph33zRPG4lPgaYP2IQqK7Whk1wYaxZWIPa4NQv2BOB\ng4Fo/HLNyqSQIygRide7TJnFqaXAQypjm8RgpX8VLdxlCSnfn4pvIeaWVQge\nFlf+uqGGR57XHLUaEAjtZb6tzC0exRn4zNoHqc0A4SqjQInLLFkRUI/xpU7m\nBR34\r\n=rTsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrBkYTnwQVFoAQriGjdMrComMD9T7/wx071hbI94tFNAIhALUWNU43y4UJg4KaTUhXvJQI1ozuuz9voBUH0J7rxqf4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.697e3879.0_1599005567947_0.6067383852428545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.eafb7991.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3j64rSW2qaH2kSIPb5MRisygxuwVhnVIGfK2z0bo2Q4pcTQrsXGh6X8vjfAwmUVKzjf/kv3bHzbW39novAQOmA==","shasum":"8ded591e88e8afc7eb82e9d1cdc556593b961b3c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.eafb7991.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDUCRA9TVsSAnZWagAAq20P/1xIMUx6HTRCAvjNfnNA\nNDH1CdUaP3/y8JPtKCittny6vsxIMgd/hLv4WT6iuy9UezeE0GpAMzWujM0m\noAbfS2+mXaaN6XWwH0IAWFm78y9IGb5DuqmmfsX4yNynyhQ8ELmeeByVT0cS\nfJ4dQ1ze7jGDExbud9917ZU4Y654GwOcG+JHggUkg3SVvZS5Eyret53LDHLV\nQV5WAee568S0MUhpC2A3IquQn+aHT8NeUazfKpNDPVCDvKPx4rzR8yK+PI7/\nwZh8mvD4PJotqjpg2VLYzWoQ9R109up7n09TjeuzaBnkcvrkb9BbuBdUFDKS\nU+aVXsZSwxLHXNnmox4C0V0UW80rUb9XHZbEnET7HC3mdO/xyxR1/6l+stQx\nC9enO6KCzjHqY0XjeExfzBJvB7kPTElSKZoDVfa8lgASxTxx00UbrNQvNFsy\nwf/I9JtZ0F4DjwH+vrUDL7m2sY/sc8hKOwwFCa7U8JNK4H2N1ewhX5zprr+6\nNMuzvRD+Qe73CTs2MqW16cDIewxQedrBWsWl2oqaYyHqbxFv8tVsYbrVZwa1\nBHaeFT2fjyn7zT+AeKdvIhNyQjbwwVxem+rqXaC34fswopav9D0afKQ5h2Tb\nCEA9oFddKoCMdfFMIed2okZj0LNX2FOElTYA1kQbov/TQdOz2bcJUlLL25W/\n+yZS\r\n=+5YE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClV8+0S2LBpxt0ttGd6tRL0lTONHr2ZsK4lGc2FjOHQwIhAOu0+ui2SFfNZR+P8G+1TaiJu4pn6kEp6YsK5T862yAc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.eafb7991.0_1599013076351_0.4285926087736618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.606642ec.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kOqfsGXLSvUa6kjnfHm3oSaQtqzMU+40TN/VFcHjg0LuWFwdpBcGLr1TlWB1eA2C77vRAJq++NjeOQ7TkOvNEQ==","shasum":"5c827fd4b3e66f96c82d48e30f93b6d5d1ceec63","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.606642ec.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBASCRA9TVsSAnZWagAARlIP/ibumTKX31YnK7j7h+fO\nxH1EEOU1ixjwAIdywU6rm6hNYEgBjRrznyBWUhALH9w92XUo+Ub/sxDYTo8X\nCyo4eDZ7dDoDXbqcf77gAKY0V1K9yvkQ4b8AaCR4/A1hY2lRxABZpHA6K/eO\nMy9SppvpdaCkjkdZAjc16dxGvSkhJ3I9moT7/YkjhCka0E0mPNQTwesYlUI/\ntzSxjJZKYXwdmH9q9Ih3U9YfOBQXI72/ny7hrj/+9iMvzTSGCBT6SKuGRYEQ\ng63cDpvHyoAnOLQ29Ehd9CGnWcvlAJJDIAyMuyEM3S7WiBIGC68YDau+NhmX\nXJwRHEYkoqfNzTnax0/hZrC2YbdJAFlWFIM/8K0TgscifsLfNq2bWFmBpy0d\n/2VEoAsyJUIKDCLYVU4plkryBKSYf3itCRcFUd9V3zwGhfgzxAKGXwJ6ImXF\nS/iMPMWfT3dbFvUyuz1T+gCMeb8rE1sWJcL34IulGy6AuKR40W6abT5kSLPk\n90cw6ajYkugEsbhoFT03V58t4oLiLnmTLRtYNrFmvCta9WBHGK9THSBvEAEo\n/R8CKgXiG5LoT2FoBXCZEP92VuWBQtRxLIR3vORpQBi3JDDheiFtXYtAWIv8\ndxCA3onLNBFGdlrxA1O4FEhevI8IlfxJ6qqmXTj7x9bohOy0rMMihzXQNoNW\nrP8+\r\n=+Qz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxMJex53rQRU+GUCNsEx9p1uJQSI3velNQkhLwjeuEMAiEAxWs/rEOYnZa0uitg4+a6NFcEe4boRxIvLZzvaaqpScI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.606642ec.0_1599082514329_0.9023065688634604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.ddf05c42.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cJF+UQOga4HDKCVmH2bbCH8avZvYxkfpeXJlZwF+GFDdShD0mJIMCSAoRe2nsB1gHrGwsfpzINE1bJbS3ycTbA==","shasum":"0f64769f79b967ea3bff179d0684057d6e18e900","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.ddf05c42.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPUuCRA9TVsSAnZWagAAiHEP/Rgz1qzddy+0UV4xS5Yk\nWFXllRiSQV9Tkp/WtcXL+VBdE1x8ik1BEnDHYWMxm/MezdPpboTHz5PeNVRZ\nSh93PsKpBuBRyYuXHk+26e0vaG1un/G8LSTiNtx+a61kMCDC0c4Gs/Mso7wY\n+32yB/0vaaUHco5dQwknl3yQdL9QWmQP1DNYIjtOlcPCKKE9Pp7G2RB72vYb\niHYWo9VjruZKTNYRlo/6bECtRPeDGaCh0JSiUbil6WPg8Uh1YaFSxl6ZABKp\npyKp/rX+sLkKJ4IYNQUYIAE93ndgKboIAng/msj3jJejty7yxUELJflITGuu\nUTrEF5YV42LT8JlmTugdkJwfGWQd1OmdoivqYOQfESMa3OlO+dY01Z1Qh6oB\n4SgtJuAbEIbRf0QMPSUY/3abLmS/TZaFYvkZin+dgRHr9AItPyHUK/bbIfJW\nDXUGmMmrx1/o7N6Q3Si6s8w8WCx0W5C/8+vMxOdEh1/fpDnLLTMKKVZRQyNX\ngEleZ5PTQ/qWLqQR0ZVenhnhIMJ/NcgnxVUKH3DnA59j0vJLyOO/MiL4R63H\nsIgGb4MY39bbyG0Ivub9HoH62mI56QcrE7mmW7NS1uRiSziHFv2opGAslzQJ\ntT3bmQz5YT5y6AC8LXh0jdsYqz7sUG3Ws8OIsFfWivz30eBeQb2dHKvKUxr3\nR3Ep\r\n=lkbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAu2eU23/JzTE6eD62fkmCqnSewB/1rwQsoIajopT3yXAiEA7jRLSyMANEdhLg+c5z/1TkaTbEinyuBx8Klf5AmxrW0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.ddf05c42.0_1599141165536_0.6502922002155467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.b889e6dc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-a5POrqSPBrybFIdAh4SoskbtcokoJNogvfRHRBTRnRhoHLqT7GDZiIe2Dir2Y2v6Ynm/9/857cHqqJ9LGrV/1Q==","shasum":"9759754ed4d3976f89be45793ed0589f03236e68","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.b889e6dc.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPlqCRA9TVsSAnZWagAAee4P+wYV242ZOOP49dCxPWw8\nkB1e8JfLNXUtrGvxkR6pX726al0RCLP97dBXlGpDEvxk0YeOE0Wx/bXcbrKa\nbC5dfRGSYMWXMX6q7I/Ira22pWtbD5f1y/1E/1QU4MN/7b/Z6upF1K8EaBCQ\nmhhzCvLc7cVOd1MW1vp1KhGD8B0nkaRjVz2uE6m6ZwZ9Uzz2dtAdwFm2Phhx\nB+LNIczWp0fZfY25JWbjK/i3JMHVfzDiMOWiHjPueu3COt8JXVRbdjzKxnYJ\nRT3lbFhD0XCpCCtT9igoZ7ITN8uD5Uz+2abAnisOQThJLWt3op/iu9/+VG/n\n8dbSeMnTXtPGw2CXp0YpVKd8QWC71wKR7wfmFeUnONhzeRLrDUq7VYxFJGfR\nlMR5bvOW/0A6zJgEa5x2+ur78OG3te8bq34H+I1IXwXmSBtLJM3srjHpk7a9\nxAitSIVnsixUgM7Q0uJV4CVm3XQkMvhKeaCBq3ArA2iMz3fMQjAnfe/SIgxC\nyRJfJ3hk2Gxnk6Dx2zCyXHLCF/DmrmcS9TytDrZ5f8hNgkfv43UCmE4NJAhe\nNJfYlhIu31Dkt55kucddmmM69AiwTxSv/5+Cfdz6vL6p+Ck4lEmpirUoinrk\n7NhH/5qbOzk798snVyAHJAhuJ67eYJCAOpn2y0Pz3NF4PGMnSL2FyK77G1xy\n3Ata\r\n=6Omb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjxlSBDkMdn8WFWjutq30J3zhxuEORjdODCgpLLAAouAIhAMOhnTMJLzOqpWYcMQ+NZgDliKg/pvPtAndbQxPb3mF+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.b889e6dc.0_1599142250263_0.9688265537564706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.aabeceb0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6W181R6a33Nlc/iP9mD5gwmpAJhUI+S/U8zTqaayRgicE+BHyV+78M7e6dS/LjdGEIOVpWjn5Mxi5Xv8r1oDWA==","shasum":"088251c773f60e0fedff572b8cd7e5781cf2d8ae","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.aabeceb0.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqXCRA9TVsSAnZWagAAXAYP/0H56yMtChzoxlvwxGfZ\noezLrSFWY5T1sv4hoEQBMOgE1Jw/F4DJq9WRQhMxtq7ZDG4I9UMElBoHGR3n\nBT6aGOXuq8JiOuWIDyMfPa8VQxSf3dfNh6LO9kYoRLmIsgpa2KGn1LCq1N8f\ns9kDwab2BlWDo3vFGYW1gwi4XzTMHZlT5wvt9X+sSPn0GmLKm94gx5gbVDL3\nZrp6/Dq+huBNUyliRglbdmsdRYzcvx12HSzukzhGNsOTE9Bxpfrh3p/TYVPp\n8A8MEuxT4BmqrMW76dtuCMUWNETYwSCVgyNocNkvgcfDRu2AaZmLTrsdSk3c\n4tmLDUtIhCSY89nwpLnjxejM20e/OUH+GDPQ1hwiiHZb/UzGhi1CVM6njix7\nuy9CPQ4AdNHzthF3ChqPRqfH3gUhq/pU3lAKGbU3vbGEwMEd4sCcu5sik+ew\nOxXkAf3saWHcTlIVs0RZXpGcSucaadu/VQQMljnFttp6+psroF0jEANzBrig\nYfKCQuw6/c/fF+28OKtdAHs+VfkH4xVi0uXWJieIQtGJZuOt2UGw7DKc0bwD\nSDSeodsyAjgtMJ/hCb8edcE7zqUf7ile4Zs1lJuytH/W4cFEQfilG3meRmPD\nWek0iB2j7TqLkI0w424/wA2N2M27ixdGbaZsJqhk3eO36Hb5BWrJxqsYBsDn\nSY+7\r\n=1DGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi5XQh+R1YF52qSMNTGzlQM62Xc0KcPvIJMBy1EdTjgAIhAJAzn7Q+7QOcxQyvrqZ3Up5tLuO2+tFv8tZaN7AZpWug"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.aabeceb0.0_1599163031299_0.4443175285151548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/ripple":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-afZu8hpkqOl7swmZTtoqdHikXqOvtxS7ld818vtw0HBsqzvDMntQUgoIVVKO2bWxNyrFZEGd4Lt5sWvcB+tKKA==","shasum":"695a80ef6d9263ca40c7509cd2d2b1d16b80699c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.d8cca3a6.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCjCRA9TVsSAnZWagAAp+oQAKJh/Dp4HKqX1ZJxU2HU\n3DDBmjF5qYOalggOXGILUm0OER9SkgoxbUEXf+JqGgA8SRixcCyaFB63NJJR\n3QKhMgQ6LQP6GZ2MIQQtFToOIzqjAHqqchOW1qSVS4Jg8tAsCryLkJX9oNT4\nQlW45tTpSIXTpZ5dyOYSgFa44GdPNexd3kWiEurhRm5Ycozq9z9X5jkc9f5J\nLfCW7C/0fxPVG+GDE6p1MvsSM128fEZfbcl0l/zdjYrrcyPGzaoDWgjtq1Pd\nBwYZrPwR9SVsATTvnEAQHtzwkS7hkpy0IlVj/MTDbAD6eYQzFXfP/UcGYpB1\nwFwZ/fAKVG3spNGVVKzo6LKMBVCxlgdsResBGpBd+yvwpUbQsy52D+BW6c/+\ndkLdXcRk1clGhnTLXlCaEfJDp3Cv8nGIfWth0PP7xU0Sbde/jsC9j8SqxmeO\nuyeH9IkfNLEu15EB1qtCJ4D7cyMv8HXKucXBUIosUm3EZjjzDIUY/k7buRdE\njuUElI9HHhqnLbaQM8+dVcYvci69Qf4gg/p+gCo104hLYxp0AUTdMHagyVoJ\nRoNo7fBjprjKyELRBMJSVQirNrC4zcuKsKAXeJfX5Ad8x/+WOdPUVE9LinNi\n3vGDNwHWnBz+JmPZG8mnw8XhgQqrrOtmfvIhjUg+ZZwUUj8CohoFi2yzFMNQ\nAJ2q\r\n=J+uT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHe+jrqRCL8Yj5z70Z2ZH2gpb9WNY3xyU5cDmYpMgnCgIgJgemF8C52Di0Z79xvx3uu8SQ3Qhata4VgShb/ujMhIw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.d8cca3a6.0_1599168674677_0.9800876436778558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.26d34b2e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Rfv27gDmmCO3vAA/M3FEFSHqmx4nroe3JNLF/Qu/540qOPWlK2mY0RS+SSuS9E835KAF8s0XNMfvHao7C5KuRg==","shasum":"f508c63e6fd0b8530ffd0144f85646f69d8ca87f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.26d34b2e.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaQCRA9TVsSAnZWagAAC0wP/1qxelMciUeIhU1R/+gu\neouU/lmZyjkkvSnVmj9cqZv0F6as1GOYjTqNr8bW7iRK/oHlFnK1hoOESl0j\nig5BxM7mTKRBON/mGi3IruKff/R0wpgBXnJsU3LpGlNA45aJW5KsMRXZMPo7\n/An0hyL9vxLcqj2Lm3FcErEI+PfIqhN9F471EJG9a0aUcTAJdYSobQtITGv7\neazD9yOokGc8i+sPm2OSuXCP1UegU53+ptMuY1sSg9bkrpzRwjxHvzltbocX\nbL989htRmNg4S3W4uULJ6Qy9G9WHWsOteVGgIeH+36me4kzl8ZOE5KSwjUmA\nt1hCtfBsM6z5rfj7Y1tFw7PKECccZr2flkm5P57rWA1xNNnSu4hNlfCTIVi/\n50ad4YPZUnVnBbQ+VjNOp2mOLK3FDvbcsDJ1L0eAshW/ytL4tkJ9mCaKCEUN\n7sJja3XJZ9aA66XS0rJEoVnyn6h8KD+ppxJA/ZQtLHfFOvwCbzYKIIcxQyOz\nu5zMalLh9+XCEzNnlvwETdHVgRXMhzVWjpProQ0dcLhrIHGG46P5tUcK6Eld\nnrLzJ/FEHeEippH8crvcApHwYr7glg8dXikS8Lma2XhKEvcThjr9Sh6lRBNg\nNJ/6kxRq15gXQRnHNHr+uOh/NYUYQrF6wts/TiQodSf8q3ZEhtzMiBeQfmdS\nw91j\r\n=S98u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLMUBPOjPO8GLowR9HWKSDHtDXCN+Fb7H8llGNT9y1dgIgEEhk5r5aI2/XQQKBiANR2J2hBm/9VhTkej+WdkTNe3E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-ripple_0.19.0-canary.26d34b2e.0_1599170191868_0.6667111130040675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.a1c44494.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qRiKm5Ny9kTPrRwiMUng10fvoSNuHMDW3AbzmhC4U95IGnm2nMUlgDl0SLOuvqAbP7eEmQyKzaEw5mwkolEN2w==","shasum":"d40f35920e74546f639b1ef5b2e8507b0921a323","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.a1c44494.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVITCRA9TVsSAnZWagAAhvIP/j9Qwl+gGGTL/4B/GNX2\nkqZgZyjDKdzDadqdOGIkYwQv5GCpURlBrZ9EaaXpyZEZJuWWFVwFMfHa9qAP\nd8WBGH4rTW+6piCpC+o+X2wVqAUyoEYOmweB07LMKRrOTItqRfrvJX5SjKae\nPMJtkSxAlcJAUMkMXkV4RJPBR760xXX/UNogZjy2FjI99wNyW+FDj4KkbM/s\nu45g9lnu5VyZw9jAIk9aTBzzKcnfXFD7qVVLpBMYpf9432nhr4j+mSmj+Cxy\nOidkqcjjkM04PICNtvaT7kaKZF6Vv/ecrhSKix5SEtgOVVNXN8wDgJRCz1P6\nXeZWwVwTyjV0BW4fOGOYVfzMD5RETD18fCYv8m/ZddBPrtN0RPo3N9jt8k7z\nNaQcTLVGYkLOk3NNRUSDRbLBOX2JpPM6KulY3kl6vWfVulhqSWqVRZZ2D8Nl\nzDp4cvj+92izh3Uxbf3wJR3XYu7GfQ6FIUbl8CRSyUvwwS+DHvwuIosOa0li\niOPJr8wFqTOU3rvff/ldd+D5h02IqkJ+hstOzI0bjB7+2mYxbsDY41B/DM4G\nxdjRS787su/NV1jmieSAcMGCjEHnLbMJ9f7clA+IJ1bDJ56QY2R8ZYuSWLfQ\ngFOXINIVTBGNdPnPmVEE2vthRVqvVj1LDwuDWXH2mUGpUu3y2RnoCxoIWTxJ\nmywD\r\n=riom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtfcZmUIXS7i2R6VIqQNobFWx692oGjttEfP5+ymmPmAiA3ZgiSzrJqbRnqP0pMn4qGxcQx/fj1ZAKh9A3OyWwkwA=="}]},"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-ripple_0.19.0-canary.a1c44494.0_1599689232685_0.9396726122954835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-70toWYdin5yKu8h6gio2omD+6t9IJ+pMl/ozydBoQXMm7N4ObWMK/d2wfXFKkvG4a8igeh2KghiGAZO3SZF/Vw==","shasum":"3cd5fdc4d57f999db7050e59067c20ed9964f82c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.be1cd1e9.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcHCRA9TVsSAnZWagAA7ZcP/27c/L23i9rdacBU92Il\nCa+XeNRo1ffv4kFJp1IPv+3JQEyREljkOfeAUHy8OhfMOg/p+0vAb/PxQOJl\ndKiwaLCfqsKTv1C4leE3O3rdGSZ1EV0PF+YnPBMwX4POvDE93I3gyNY7oxzE\niCCNIwoL5LxuKZxajhqIG8DnxB5IovjDhQWG2YZARvlzi6ZwMMdvNE+z/Ipn\n2eKwZO9qXXjBc8hedXqiE6NjBhRsr3EeltF+qW1Q42PoLns7qe8OJVf5brx4\nVbOKaf+K/fvKUmJZyfoc2lJ6Buim2ADNJLs69DOKeOIK/giQA1SBAABcZ0v4\nL1k2mI8YXqjkE/0jGuYH0WEkPiVYXm9MgpWIMGSxhlgik+H6ezvwpzKTBq4U\nmJrBkXjYc4z4makHHjJZBlEUJnKewVKWk0kmjbFhlmSuvSpE2Ben1lCM/hR0\ncsvT7hzz7hPWABl1GQ3c2y6krN7VGTmUIv7ZCX478aP4R9vDb7miVNXJGDzT\n5ovWC+Nf93vpMT+RvgNiitdoI+MgyS8Y0SnY/fReY+nxAZSKzpHCxWsm3HDU\nFAuO6cSU9J23KnY4QXuGw+4QxzYEyAHwp0iA8X1ugl1mgpj9aZILA/1yR3vx\nOfTfpm0t6R0atevt6CD3zPSnqFuqSgaQ6mM43kJID+c6dGX7nnBZDQhXXNrj\n3wJE\r\n=YhEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyWR7lgLAEuuDCMl0D05puTsX82pzVLg29LqgKD0KnnAIhAKzCiFNkZJqtTMetWSM9oHCEvlnSW1V31F+jWIe/+gtr"}]},"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-ripple_0.19.0-canary.be1cd1e9.0_1599756039146_0.1433393804681442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.f094c0ce.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-O4crnAx/KjMd/MGUxSsfa4MP3FrcKfirVp4WJmWOXe/XcO+O7IIsKz+ZBHVi6padJq6wA0Fv036si35AWXJBGg==","shasum":"573556e21c820a58c7f28e2af5118a962fcf9e7e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.f094c0ce.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmP7CRA9TVsSAnZWagAA8+oP/2UaTvw6ZRnnBLRm1oK8\n7TZcy2bzXwxG7ZuoBliBvpeR9Cw4y9huc5kn+ZnCSSQBLxhmxX8EbpZqfNEz\ncpW/kqaPeN3vmVg6dekV/B8yMQIYSxOR4k7/Rnwl5ulE8it73cRIuos0pqCs\n1KbI31WEbnLTvJb7M3bJV+JpVli0MC16RMz1/fRqsyvF7Ip91ffqCdFtDnDs\noMScYRm10Ywubq3mimMJB4LtVvusZnDbKVECsAumJ2QAAZL85Ee3McPc99fV\nPf6Wku5AssA+0b7XDewg7aFuBXvxVJKqwESMriN91cD3vNLFVly16zR3bi3a\nTjNuWDtmWas4Z4PendYVZPNYD+bZl8yUcAZk7iVIIW7XuRol8NiwMCcB5UH3\nf+Px0+5UuZcRVa7aCEFRDK7y1gPMuds+evWDWSl2yW9QWxyWhc0w8Q9yjsnW\nyinBj4Jtz9i0YciNRaAKULsAibqq1l5oSz+kk1uvqtriMJJsVC8CjopsEBpe\nn7J77DxzsG9TWOxkyY4pzQ/sJAt4ZUdtmN9+zhd0OEr6Vp8NLvp4FGph+enk\nAnMVKKYNAmGTqDujesqmYXII+CKA7QAwskrwK2+M0GNoxt8uAigJD9ZAOhN1\nZahmC0kxB2J0DEAmtI7RtgR6sEYUSnOUfTOGV8Me8LRyEaqKLxi0ArXaFQ9o\n5cZk\r\n=As0A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKTG7YfqA2kywpLzp08Z1d7JMQOZGuvqqxIT3Betm0+QIhAO/ssjTAcRFfoMjuUzbUadDXltGORQ38sxisf8fht8tG"}]},"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-ripple_0.19.0-canary.f094c0ce.0_1599759354563_0.9205673289413463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.c1261e7d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gr7l9ZRJQJ54Lzvvv+5BA4sRyyOO0Kb2YH8UTdIjnlJLhfqgMk95Mu2AgzY6wTvfdbSUR0F0U4zjabeSCfNb2A==","shasum":"26cf92663b77ea7b4dd407af11d8fdc820bf16d5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.c1261e7d.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuA2CRA9TVsSAnZWagAAc6EP/1bvwH9Jpc2dlPPrboDy\nDeCnO4SiTYrE1MjKvuG6LvpknSdHCb8U5Ik4k0oKTQ/WTbCEiZcgErakjmDe\n9AsNu6udldJ7096vpem7iZrsJr7BDJ7EQjlbCj8kIO6+1Jj2mHPxoHNAuax2\nKjyJg1fMSiO3IEoiqt/9U2Yea5a1xDkBE6cwY4uQ07khYhF3PXFNvquhFnhb\nSS4evT2vjyrrotVJx78rxkRT+82smH1HlerYc6OGUyAV9KvYs6VVQN1uhBIj\nxYVPyhmrl0iK68UKsrfyvdWpJ1KnpsdYf2DWAUFwaVHRT7l62kjUid2e33pt\nWyxjoJGOtVbVcv6wXfePsZASPq6ntoykCNmnW6YuCTLyaVVUOxtwrYOguZnf\npIvPApZ+VtSWwC2f+Q+p48Js3On5/apw6qBjk9sxTQ0kYKkR5cTOm+p+JGWa\nnWGCLXj4s4VdBLKJ3KQMbX9R2DtYL+Yql8kdW7dgm3QuKfZVaGW33zVpzKAn\nF0p4Q/hLPEOpWSpXkra+KSg2T/j7DKHaNyU9/5N+QhFR7ZGJuDJgpKU+TGW0\n0KxWH47H4LGOcUUnKaSGPN9sKMARTx1DQPVMUv/IUhLvYjZhkkFqzPHskP3d\nHkvoGrgHJZlpAsH7noApOHJT+pZXAxZser+hD9coiisUsyMA9T1e4m1e6+rP\novlh\r\n=z3gG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeeTv6ed3yJpoSEkLG6Lb5eGk2P60+qvbc9fpjidby8AiEAuYmJpaGmxf9SKwwsgUPlB3asT5dcMHCjelrwNl/TEHs="}]},"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-ripple_0.19.0-canary.c1261e7d.0_1599791158123_0.5911647108867883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YNde+s1mPC5vaFIYFRt0S/vR2iZDQg3Hf/YzlyhdwLxyFtPyjzFnva2SZI14LqTs3OmTmpuXeMMmT2trfegxcg==","shasum":"ab36312571354c34b213dadf851ddc4971119005","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9b39ed1e.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBtCRA9TVsSAnZWagAAqXUP/irKqCTswJnKJXshiFb7\n35UMU7ykF3vpaRMiUkOHBcjD6pPHo5SDQQiSY551sVxdBSBg7AjRflNxlsWU\n6cqN53ZsbmmxtaHhDIppOvV/IhNW2j3sn3GzElDOi7+v19WmIk5QZuk+FM5X\n+cobbHP2btXl1Av+w8+YJVlAaVzWCV1mIXchI5XUZ5MitoYd5Jcf4z84pYZd\nmADqfxa9P9ZG4/ajFjg9kScpZvArPg56kpTVdjoMFw8WpRzZcIt+11m0bvl2\nOG6KhQ3TvTDPCzo9MlHZU6rKrOjHPEenHRxoNPtClH7205+oXhAoJf5eAu7f\nZvaOoIDa5yFoju1Cz558ZpQB8y2WKM1HwF20DCcaBHj8a8RlCoaPNolvINmC\nTmC0tnE6rc5NeTTQndVQ/cONflEgi2FaYWdtCR6s2Or3t+g6xjo6g5nS8o3H\nC8RGpKyjyjwaPsCQ6EJR941OEQHU3i5OReUBTdaBtCzMfTQNO1EujY5UqJ02\ntyHu58BmS8Z7CbkpG/OKEccIoSlUJdDDsB1KR574XNyygi8di601DjIPs/km\nTEnZisQVFCPqYsNzgScD9uR9WZwHnUgSCQjejXyvtxK0lSQmUmE8lxck3l/1\n2PJp2j4iYPuoYjLI4F+1BuGKOQGgawuwjC9GupawvSPHKCU37sDKSPMBtfGS\nWL93\r\n=6p8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgoMmZXq+ZMxeik8BeYqKmWf4ZI1QE+lMLRMFIlfYmRAiBRMi8xi3Ps2Odb8wQkZbDz4dpqVcfHovEzisWeNx7c/Q=="}]},"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-ripple_0.19.0-canary.9b39ed1e.0_1599791213024_0.2669109536786829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.e67214b3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QrsR+93wScUM225FGrFauEIVU8fIFr9ycAmM8vMKv6AiCfPxHhjw4yuOo31xPZtYD64asqDs0H5SDHyEDlF0Eg==","shasum":"3342e6dd6efb54544d5f17ac26296e7ad8783bca","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.e67214b3.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuFxCRA9TVsSAnZWagAAmcMP/0qtCbQF7RZYP2Vdoyhe\nmmp7KVLWnADkdmPxTaa+qrN6v1tdyohdys9Yu2q1fTvbb6VACxgLyQxmD+hA\ngReBty59Ipk732jpnXNlfPOG3lmP+iJQ2wKfTwA9ctIpx8A51XC/yLk23zxU\nLQFie8wgaDiMuDxRYDsYEqICf9ffVfSNDIKMWqu6FDHgCfu/mRKUfCgtS5ED\na/pcw6rOfLZUpMcUdPnoU0nERyiW0G0iX6gG65Ha4gXd0I2TDHVMre3mu/65\nFP3raF6Dwh+sSYJsACqDpXnRErdXU3XA87nOsKoOX9goFZ5m6Rt/qlKzjMkf\nO2Qv6T9dzaepusYh2Y1AyQdsxoIWL92310JSYfGDqPGktmGdT/9frWjan3Hj\nBxOG/idb454j6rjhDc+mhs+FpJLpPEKJFckTE1jutDhw66jwnc6X+i97ONXf\nuFA8+xzxxp5gWMFhZMRoyVLsrHSqHto9eKNohLbzJyu8FpYLuUe+SsoThLn2\ntxndCR+/e0DINhYBWSLoJyV+CqvYVSlf/dzrDu3DomIhh3NG24onR+LD6Nia\nbF3OFpYul2dKww5ArOOVNuUUOw2k1UWlW6iOnSuLHFKOrDrwU7gvrY+DxvsX\nAQe/aPftqqSFR+lbNCCIOfnBR7vBFQPLBL+42JEwUYwBIRzgVPmucXVV4YLT\nfxbf\r\n=AEMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAblTYMiw48hEXz4qVrPZkE8dASEfegcbopxTWcAn3dDAiA2rn483xqY+++jiFOUFn0OOCWLtidWbNqpqaWvdY/d/A=="}]},"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-ripple_0.19.0-canary.e67214b3.0_1599791472527_0.3199242813058867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.36f5da28.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-87YpUKkdJHCoJ36hxsnRxxwZ4vCvV8oBFadTRUFXfcH81O0B9w/yW7IIc5qo3c5k/ePgu5fxMW8oPbBQ9rErvQ==","shasum":"8604dca8352caa76e7033e30c6704a51222fca10","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.36f5da28.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIQCRA9TVsSAnZWagAALtsP/j4dCju+KBgWWOiSeMyj\n7Zy2VyVrZUC5yO7g18liDYeVZLsd3KqkHwXlUFfMxfU/XXQE+U3X+axdQZgN\ne9L90W7MBXdLAWU5A3j17m4BsCb35l+tGKcBGTnooa6a0XDoL3NvOhW03XJA\nwtenI9sONdznzq6wqvqx/XO0TpJDqIABE60QFtE+Kh18OFkuWdzV5Kv5PQti\nRIjfbFcHBzaE79JVoZEtm91LF6KsZG/ltfTnN6iI3TZrLXQcs/FUrY5Dx07G\ny6JdI5Pf1n/5Q3iXjgtzGxeVXUhbp5k5RfaVuAEt4fYpom6jEH3PZA2VTNS2\n0/AU60ABCdtkExWbNeDhsItQCHx7eEBqX8sSDIwKsENFXokpbvUkmeI9bvyQ\nJbnJMWtg2BsZr0hJhpJMNuk+SERbFgMuQT7jsd0AnIbFBYTwTJRLKP+QvEIw\nZNFSjjeXt0K3oDlJdMdmQOXwnsxUieJkuSnngLjnPtdXLsOTzxTssQAr1YOc\neLN7Ygw52SoTh4nfFI1C99L4/vDOqojQJ5fhr+VGXi+DRER6XUBNtVfk3Bbx\neBmG8rg9GCswYi/R3QqV39GeT+OmhwEr96UnlinX2IfvVqif2zW5x2QRa8mB\nlvJQjN6I4nDuhgi5wEdIvdPXcGUGV0gKWNW+y9oo8ieMgblwLUPduIUJze8a\nYQzO\r\n=RzCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUA5g9xTa8M9Vnl43dsXR12m52Qc8LzahOhR4SPIH0iAiAHETr8uH7hpmq8IBDw99YExBZnaYHgoIRjd2mjgpb7BQ=="}]},"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-ripple_0.19.0-canary.36f5da28.0_1599791632190_0.8315069535531809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.3babab12.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nDaBcg2/0qlCEGp01uZWDpN9YtZIEMD/p8SFrrL5fYKpjbtyzwvjLAp9iGv6SsoXkXuQZ1OVIgW7kmLCubM8Kg==","shasum":"6808a8da3e464b9070cad890c776d3b1ccfead0d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.3babab12.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuK7CRA9TVsSAnZWagAAXk0P/3ta3SSnB3In0j/AUyCx\nYYPvUjbu/4QCRprZrBd4B4xpLLD17cKq2pLOkI/QtdpFtvdAG6Pv+d66P1rO\nOdRT6sQXKaFagsPbEbU7JsEO5qGyRZAihOTxM9+jlRQsF0RDWZGaVOBKMBjy\nF+WVxzZpXw4aT9+hAaGoxyJVbr8aY19BUGUfNe6FH6dFWEtidlZKF1bPcyZj\ncfWOB87D6a3SZtPvDkRmzcd8LAH9xKWEQEl3zVzxCDzpFgzPz0v9An6/Cl4w\niKKCTjNSn5RmQ8T4GiZsHKqNuNMUL7fPjwAdptsPTGCT3Bk31BpdKY0Q+pFW\nIrZze5QUo3bhWE956lifU8bl20xwkfDyrIUGQsUgMnp+S8c91sp2MINZxlWr\n8pgOr8bDFCFKQ4PXqmqWwMP/2C+78Naa55JZZ1W6PQxWVHJJUoCna957YGUh\nkGOehbMD4xiXR6Wc0jgJ43zQG3pMxDCT2sdXqqazLj0IyIPrnVPm7ObxaisC\n+3tAsQGlDCvXVCwfXFbUPdakMueaQluyKy2wAhJkZbHaGhjU6Tk5ObzyRPQv\nm0TaTiAfGfWjySkkiXqIq5OD1LXzFSZTQbcnAHkEX/O9iM2/Mh7OihzeNK5m\n6Bw+KBJG2o7BSwW3YTJZ61rc+KtQxvI1dEocZh7c0ZOQmMp2tWdIR9csxRcn\noTnN\r\n=Hm/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBikGbF2XxbKhADsRzM1tZNoBQWN4XBRwiZAYfJUiBxnAiEAoMCot74RSGAkS5RB9m2C6YDTvghJYrfsALq2W5pepA4="}]},"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-ripple_0.19.0-canary.3babab12.0_1599791803468_0.5976775255484612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.a4481e6f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N6V5FD5vf45lYjlcvyBnrfNw4BJpGKXcOPSegugm/oRc9Nr9qumIgc0i2yL2gtIwq6lBdR4czCeH3q4aTAGxVg==","shasum":"ab6b819d2dfc26ddf4c75be2f83ea1c7e7e4cdf2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.a4481e6f.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWbCRA9TVsSAnZWagAASvMP/2Ff8TICmWEPjbp0JlBB\nQdVSXZlUB759ViFNru8tz5U/9bRch8WbiSJNvl5tHBZCU2H+8tsrMuXhmNAY\nX5UkTwEEdt3TAIdtEFKqhTBHmi65dWinM0jhCNM+72ZbjE0AlLzHF62syf4s\niR3w33vvlmXWwLn5PbyCF07gj/HMU/4LPPxy1ajPZcFnNa5nqolyT+rzy4OL\n0H7rcMEAUtX/JVaIDU87l1ENGpnTTLgesIbA3v63MfbTkA9VvzJzaDvmyqGN\nf+xwLvuohAfwZ5j7a1HvKLPqWktryJasg1rVvAILNrzlYjHvxoi/Vc9got6k\nKg1eeHQ4HfqVjijgBC81aT7w1Yn0YbNpPO2ZdlmOUYGXILFFmLtMMPdjEkz6\n/8M73XCqKzbDAK72xV3aSCq/F2DNg4hwk6RjzGzJHeVixkHCxhxbjMFfi98p\nnDtsbUlxgPCwAKYmHGJQSITWDS71qD4UZEYmKn1ZHSFF4IA/x6VD4irRzSnZ\ncmnPxuJTWaMpy6ppkn8ICdCOgix45HbAI9Yl7ES+5AjnY0NHguIcMeZOAigu\nLa/q5eAiSKG1j9oFVt57U1hG+7eoEwFzKjmSns5iKuzkbcnhzwzEM+sKETBZ\nCZI23PqPbg//hvd3GCWw657EdoCY7NYYzjeHZc5ecw/u1DyYEkrJl5LGLyLM\nqmCr\r\n=n/2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAA7w/2UqNzdO/KcNfT9+NdWf7omLUCMn94+CFaAyEqAiEAw71E9bbMHsVJW1D9TxmjyijWeIUT6UodyCk9P8FE9ok="}]},"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-ripple_0.19.0-canary.a4481e6f.0_1599792538574_0.9717920298889788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.a9177836.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hR+l62axECw6K4Zwn2poytyErD4UVXXa9CMGdjr0G1/2mor+AJorkpzlPay9ZxcdeTYPtiGcwYXSlqcHXBiVwQ==","shasum":"b494fea0c7faa57ddd981493cc38ddef2cf47e30","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.a9177836.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gbCRA9TVsSAnZWagAAQowQAKECUG267pIGWU5lMR1H\nSv+xK6dsDUPTRG+3LlshOflRPSJbwNQvSSIQrEQ3uLGeliAqDg648t9amOIz\n4+31yRv5UvEQY1zQ/+7RoUQxgVW0c3MCCK/2/YuJOQ4aAHNBFn/f8x8vpgGh\nAb5fTQvOgt8W4tJrCtQR/6r6hRtWsdanMLeP9wgHQpXwy6EVoDq4MfuYI8Er\n2tqrpci9cPydcsI0PP2e7fijpglmqKWqaWP8pRDFjkwRP2AxQ2zrmZ9WtybX\nxzvvGb7xNd6MWZMj/1P0DcjFxPJ8V2pLxbMGW57eXOCJ0fxJuQ+xRuoPGz3v\nfXPEJvjG0CIV3olrsuIqfVU7RJSyd023Pj9N0KHDc/feLUPvMGjwtetVcRvY\nfak2Ej83cOW3D9E0I4qpmJcbYJrPjwCY3URo3f7Hk5sNMV2kQcm682h5AUHj\nwLuFaen2SxDNCeb3+QlUvTZpIhiln0GlbAHhfw9V65RlmMkNOhVjP8SklQug\nVofKeJUv+u4G408xiPnqMdwJvS8eSSHno2Y0ajh3gBKV/syy71C10KN8hvdU\nCKfHeJxNlx9Clgpz4yJpvx9BM4KmtQVTSuJPSdvLCKV+41o3Vx6pm79LS6/K\nrtX8UeVH0Ek4sgasu/EWxhox5fnph0Uvr6bMCfqYW1anq+BSsLVjgssSVe8r\nTs5h\r\n=uh0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwkVeLRIqjWtrXkDQ5jZEYOuPouFDMUMD61uSQe7mk5AiEAioFRKKss5M4qPtx+6GHM85ToTTcH3FuHJtH2N+RjYbU="}]},"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-ripple_0.19.0-canary.a9177836.0_1599846427184_0.06227958699569802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.b102a3c8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/ripple":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oyJsTGoEqIIymj4yTV1PLfNAukQdxl3zE5ubIQhg7jn4xgmR9868PHid/ahzMJ5zDC9mEROl0DGRwyfo/Fysbg==","shasum":"39a295e769c0f43f44acbf78d93d064569d1a0b5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.b102a3c8.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87ICRA9TVsSAnZWagAAUTsP/1hRtjE5WepZvyrEQWUs\nTHNOlfW4Y05cCSMLY/mtB+8tCNk+QlI5j8twLAnKym0MzMiimoS8b3Q5HtWi\nPSjcEC3+WAsewsRwwZucmKnKxFNsGdjSw6X4kSIKbEGOCpeFwD0G+shPR/c6\naz3EqCl6CReIrvYbqhD/8NpU2nxTHouhw5nZUgZC+4aJb1fzZdvEoiail761\ncO+larY8VCx+MyvkQ5T5DcZVaDVlo0s7GENMxNf+8NYZ+kCRP+Jw0cVsiP9F\nhqr2DOLIHYo4ZDkYx0yuLoNmmGLopWqAdlkeLKCOCT+irpJz35YnlZxScX8i\nbVn7AVhaXDZSryXmKWOWDXR9ttf1I9aWNb6O7+B4po8m/HOMmlBDrCEJrybM\nQlALQo5KfI9bVglkJ+5NXWsQl5NKJXUXhmAIhrwilsVQYm8DOYzWtC28BB5w\n49eOMcK4xowemkmMLd8Rx7SECjCajl1h25QctpUl60O3KAUaA6yXbWD9z6yX\nnkuRTV5TojcBePidR0zjZQCFeNQTl0pkUoZO911YUQD1/W5UsmlNABqaZHCd\npf6rlWGmudJuRPGxExKBuE09lwuY0VFnoBY4H2f6p8Rf1BmgfhnuAclGyilb\nmr462lQymnkrjPI8RmeuIH80oAiA/4N1tfPsZ8D2LxDLWeA+RKefmhELia3A\nru3Q\r\n=NacS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBh9eSsjALFISzxXwIMliEv1P/usoOmqTeaMgszksRirAiAeB0+YdK1BpaumkBjIolqZ2rPrSvftGvLgl8hFd+u3dA=="}]},"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-ripple_0.19.0-canary.b102a3c8.0_1600114376007_0.7667609936316773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.a7fbc707.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/ripple":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+8PM65+ZrNAdmiAD/rFDS2RBFznGjjaqEpycMJ7GZ+eM86ZNfN8H3+1hl3SbXcwEziLjlfCVe43NGj7u+KiuBg==","shasum":"44dc525761dee09a169ab80b25cadf9d65ad19bb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.a7fbc707.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOY1CRA9TVsSAnZWagAAYjMP/iWWy7i2JdTgVSaHgX35\nSWxqlN/tHiaFL+tya+habUtk7o13dE0cRpe0x/fAzdwAbC69ABRmPZVgnR4R\ne5wNT5JJigzQpGE6kI8aXrcIRa2H4L0k/vVfBUNxYBOYseQ1mX/lqS4DG0iE\nGvcfc0g1SO4SU+Ep1y6cmNjwYZIvCsJgb5DcBgkLocr4wqw/3gSMIUjsQjWl\n1ELujsv5KzByX/2JyQbYEJweRUV24Awh94L5ZpF/MTKO1pHov3mH8OTlR+E5\n8DQ5Cu34TvycYCaJJdERljHSvz1QD8EZUu+dWisPjcn5h5e6hRJz7zTWySWt\no7lS9GhcYl6emAkFbtZcUVPKFN6hx9HXF7eHuWHjhumEayBugL3Wp3OsLWxk\n9Xddd5WlyyCmRULpZSCOJZ225m9Hn+ROhHZqiCtcqige8w4sEPUk+WhamXfX\nUZFUmL0wFssc+cF/B8Ps3hpokf9ZyFk9dHZVA+w/3A3dpQeFuJWcu65278zM\nGGE/CSMTouwzWUsHC2Y6+l23a/el9t9e65kvFfvORQIBzU6G3E0z5M1TiPDp\n0ZNviSGUR0c4iuF/NRkVrypfwPIUu1aRhWsTNatJWODTKOTW3NNBW8edr0ZR\njtBVTimJhaA/pmU4zOVmx13L3UyZzsqL6InupBb/JpWp7FnlCewFAAnkpkac\nbF37\r\n=7sNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGYQaaC2OwTDRZKLJ6WVP8mSJHjxV5k8UlJFGNfFJk8AiBm60ndPU5lbanpWj62lfgx6X24cUZWiGqjDcYof0cjsQ=="}]},"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-ripple_0.19.0-canary.a7fbc707.0_1600185908516_0.2164434333926326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.ed6b8660.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/ripple":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zyGhXbrvEUoGLUa9URMtnlVLo2PuXaP/kpbLE2V6UgZTyPnXd4EB7Ytjn7T56T/AoDUmzT29gGO6yQjWQITICw==","shasum":"bd981d33c03c4b0f0c57f58fb88146c9a982831f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.ed6b8660.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjMCRA9TVsSAnZWagAAIFMQAIUVCIC1A4H1yoSb9MkK\nTUdUEgOPt6S084gJEP0xigekY1R7xX0grQKRwFmj9ENdMmk0BaPgK8u1ZmN2\nDhn5QSFwPmY4OWz5FQE8UQ92HM5BORpms/3+8zSX2ixwFbC1Btw/au1Bn1lV\nn4ZFvwXj2/r2AeB7CEzdvGzVxrhETKzI8B7XFip1/Sp6iTUb5wDElBwB5oCW\nPeoCLdINFwPu0x5/wAHc9MzKNs0Y1dtwdj/6qqJ/SDNfhtRtP8iePxoLd3qM\n2wntGeRL+0j3rAeUdFeH4U7z6MlB0I76Zqch1ou3EAwIleC8HIxyg24n9uWY\no5ACoEROUUEbJRu8rbj51Y3Fy0rc9DVJkxuIZ0Swdi6wy+STvzakvAQ0USpd\nBRbJOpiNd6PGXQNA1nXzGebWvgvff8KNjq6gAYJlFUnOvRxPm8bxS1or1eRE\n0P1ImGfIUJv6xNZqjtyBi4lZg2FrV9YoS1U/z9wdFDtEG+Zfz7swmx2ic4sY\n0zCHvUcOzrjnCbUxOgem8I/zljk6aJrA3a9SZeXiQ+n+pZYCCX07jqrLkLw5\ntexk1Kn7aY51smw9M8GQUBO1zn1tGHqV4tEpRORlN9Sy57y8WXR0kgaGNLzP\nVr/148BUXMeh14ELxgaOE1JtrTtBQXyODntFFJ6jPyLAanicmWrkLqcGD3pO\nNskw\r\n=63ho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEi+9Il/SQZFyzx9wl6gWFXIYembR/665UZEuZ7qcDvcAiBt+ZpCG81n100u5RHl+IPUqX8ZbijYUXaUw8zUXpu1bA=="}]},"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-ripple_0.19.0-canary.ed6b8660.0_1600190668492_0.48122288389229206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9c2331f5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/ripple":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zBL6+ieMSQZECuwdQOK5nEh82v/p6QXg2TFcfb0jIkDHTY1HeMRdfnQ7+sDaFEEY+YOFgLFHYkSDDygLg/TWAQ==","shasum":"d1e3316bd0ef9fc86817f22133a72f6a18d875cc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9c2331f5.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6ICRA9TVsSAnZWagAAdpUP/0nyicxRjdzQWGvKG+Ct\n57FgYmfYRM0tZLAkqWup4HpBjfzIfjTsWPWPGELmUFao2XEACUGR40VTmyvk\nWhznUdN9XsCXm6bOCg8JRB+2lRtzSGCPgx3mLh+Ep6UG2GOlPJ/oOW/8baXl\neO697ORZeN0Lk2WRsspH3IVsD2uf7GtZD4UWLe/xIbArTJ6F1RK5YwWp4CyE\nszjQPoJFhfCT74CYJnUULSXUfsxQVXq4bgbqqa5TavmMKbKOg5jB7iPKZRoc\nKsZmIicX0Ig/FlfGors7FCXdozJvRFOQpKx/hb9CgtZhMPXR+mwzEYGLulFf\n9UwBTEZP3m31XNz/oKErfqOqObDudsry1YOgxisuc1u6TBAHSHAF70zA9+wh\nydILg/RUvM5v8d2UczfETI4zpqu7sOPYYdHl6QyEYdIxG1BU4V8yS3UO1AeD\n7PqLbMsN31IDCQ8xXGhv6OgOy+gJd2ntc7dghWbemDkESCq3EtkYY0STIXy5\nBG3ERIx/PdzDtH6V1Ltas4BWGdw9al2K58rnL0I4A09YLgCOEkdJLtMvOx05\nzq6hOj9iV+HAUWQzlNVXjgJioIdahhoxT7n6RqLcO4EsquNc2M1I6TcFwDkK\nk9lxvAdtkax33eiV0SO57mpHf3Jc96TkAOtDnPnWCvb2AzCoMkrBrJ2YXhpi\nmYN4\r\n=FKjX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7hJMLT4E1Zhd3RI8oYcyGWiJWxOD9hSHC/+ox84/BLAiB1rfq2VtXKWRBIpRnnqyKEaT8315jA61K1/n7RJeDhXA=="}]},"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-ripple_0.19.0-canary.9c2331f5.0_1600192136322_0.762429270727004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.63a5f088.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/ripple":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9FIgREuBC7SiQkeWp0eaS/cxEtju2AZNv/3PjZSyt+7+SN4139/f8JQB8i5FF5SOnLTCdBr3QZx7V3HAkFTe9A==","shasum":"5be3856475a7dcd332434decc9d760c2399d5724","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.63a5f088.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWYCRA9TVsSAnZWagAA/2cP/3n37Id9aToWgNR8EpD2\n4jj/ysc8Qeg1gPm2ByuaADsreEp3svrcmCGHEPuJdTUeQ6G/ZeKkPwejYF0u\njMTz406YKhQcePdYGv6GwYYIqrskq2lfPe05PF0PMFzRMHjfu3272SmqM2sG\nmF6iDWv4MmUEEn8DIo/hoqJl2fw+AE/umZig2PBIa65x3Hr9a4pz5FzEY8Cj\n9iphv+Y6bgrwVQylZw9Qu9qBocV37dsF5vpSk+LA70NCA6PaqBbr3le8m3Py\nc71g3c4je+Wmg11r7RelLzKektWoLo+FAThtc5cQ1h+cKhGHrS8vDN8IPNJV\nfwMuEDDx3Tj7vQaS64BSBdEZZ85Q1tMXMjEufpWSRNnIG+reXiWzLQ+9YMEK\nXW76CDDY6X/LwBugyR+3AV5RxoZQPpq9KLWdhw2p7ADlBT2OezIDVU311Zl+\nyZG++2dVITCYNWLJkZ1MHGbxI7x94E8lpZ5Pu2/kOwZKDH5XB/t2qCWGsBRI\ns4ZTwAmKodIyy/83FDoFaSPCd6EKaVlYQ6QfszxbMOevYgU/GxfzQtmT1YGO\n3kP4/x45/8uwPI3Bvk6gQs+Lp3JtfGvlLKLGt7WNf3ndMidN3rDli3X0nIp8\nZNGxvtc57hBT7wf7suWymUi5NrnGOT21Goc6wFc5KllNPAiLjoKQZWxQAXsI\nYTjM\r\n=a2gd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYNqgikyP2twSXs1skZwQ/PZY2AbgMwMkYnfikw7zcWAiEA83VYkfNsL0fuEqnBlH2ILA2miBasUiM+MJpJscGaH4U="}]},"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-ripple_0.19.0-canary.63a5f088.0_1600292248495_0.835727501222302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.b7995e49.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/ripple":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fC0dLHIzUY+CFH72rORZgDxUjPM5s+vrDIC6mfRWdGkITc9cG/auAvNCNJyN+3wsPpGyXDVs9fBZQaw00pEc/A==","shasum":"0e0186b99258e2d36ad2d298abc063e9e3cd5f0a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.b7995e49.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8UCRA9TVsSAnZWagAA58cP/j/7irNhyWKyolxI9EQV\nE89G/NmJ/f6nrnPG+ej0j6loiPti3CcmKNS3vHn3MSSC/s9uLh1xzevBAT8Y\n9Ymc6QddE3DxJ6CR3ZMrFECKQh71k+e+abSSlUZwxJ/neI04UYAy6xab/Xnw\nD6LiMvM0QQA3v0kpURgDVF+hJuzV01u6fbxPpEDV9xvQmF/zHsYars9YEX8K\npsi8XzCxBZ+uvGcvmvRkjPIuxbh6s5eNbZOSTpyT3HuqIeo7FlKH2hL0UlAO\ntWeLF7NSXUxkTI71wxtUka3utYDjGCt3jHBZCNn00tp30hk0TbuXYcx31X/s\n1TytBm/7wT15wgfRULSZQoTI++nG4iyBWMtLy2xWKXMVegc2P48sJ/ELlWbg\nXAJM132JTXzP+n4URTNnxRAFbBdftCxaymuApPhvE5s16/1uIwuwnR8LmqT3\nAXhPOwRHUcnAsUDXDIohTzLXEhHWpJQfEunzkOlORVHGPsiwP+hEsDzPBcDM\nDiL5yw9uAJlsltEhWzMz0fSMAE0ywdO3XRzPDP9GbWsEvQBqGhjgw2mC/Tng\nf/nYAEuzXTftaGCQmD6MyOhlpmq2OJewgubC67oYVox96gvTbsggvC3bxrpm\nzMyhNyFWO7992WDTIKMWSFOcOZvd9uAi2tc8eQS94CSnhEAbQ64wHolXlY4C\nK9ps\r\n=XygD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTQ7A6SLazQ+K3t/sNKi0MQuGlal5LJ2qVOfeXZVi8RgIgM2zKY9E678tRm4BJRzWiyk1Lg0nlO+DHrfsdjGrXmEo="}]},"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-ripple_0.19.0-canary.b7995e49.0_1600298772466_0.3982864205037744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.0da3ec97.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/ripple":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-86h9rgSS7yElhh+Cw9BqzWICFTMVnyRHYTW8WJfJQBW1GziHmZ6l4Ldn0J1ZgcrYq9UZ4sIH4gwa5BB/bQeJAA==","shasum":"3d9858d5c6862a62a95833f09a819f1771368f96","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.0da3ec97.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRQCRA9TVsSAnZWagAAW7QP/3DvSQK7oG7xzdDDcB5d\nB+/mJiDEVCbZmrkBk1VOAUIV99G/fsOI0NUfvMHdXp+6yMmYIykcipeqAJw3\njPBFxGfh3ndA7Er6QGFIH+tUXIYY7OdPGcupgSI17MROuDSZRFOw+4J9kcW/\nfLJyb97Kaqzwu3qqEkRsveY1d5zSimlCQFDdiCjVPdsxS5W+s87ciH+qWrmi\nnBt3U1BRUVVUnC+VE+Mw+Z1ej3bRD3FkFF9weuiJo6oLvEGe4CuI3cUkjdUG\nSZBPSSU7V9P/Oa2E4/O60YSj34m5wIwkZ5pKhHeRAdhXdizRCHdSH7pAAZSC\nt9Xh2Dq9rrVcASbs6T79CDXD47w9KIXQP5in1j6uIWvKjNFLp4caUNNn13Ty\ncGVLP/DKMfGFOfkAHswo7DatNP/3F8pWINKLtMdBvw3FHfzwyqJKurMp4Lc+\nFfGxEJJX6JMntmeyW7MiAJFZTQysVqCKHvxHGmy+QvNYpkv/qj0CoK4pZeld\ngIddkzi4uTrTMjTlLc9vt3Svgszg3RVP2fRDBVsj7SWxAbyE5KnHtCuZobsX\nrJ3SlJoEOtAgbKxtN/nEm1HvNuzlBoMvJMeC9r2LZkvQxDouQwHbSbqMc4ph\nTj0dbZ4wEMBQkRU3IJLjsVJPEt3j7JocvByKVcSxpPpWlqpwVpf5xzk0+ues\nYo/t\r\n=PG5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA90lYpdszTu9iUmFpG2ZHWKU4MJR0Aq7WNHK1t8U/sEAiEAzSUAv9mDSLmGaKJh/CdoKSCfpgeAuE1HBEh+ClUTFz0="}]},"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-ripple_0.19.0-canary.0da3ec97.0_1600726095969_0.5304496158976866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.a0793c96.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aoPiPGvXDxuMtCNBWLr+Qw7Ecg9s8L1perqsXwdRg+62r9GBMvNW8XpVecVcr9rieT9mv1ZpqyuNZSkbDgqJTg==","shasum":"5aadc947c2416d5e209b4278aefc988cdb35dc98","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.a0793c96.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6HCRA9TVsSAnZWagAAxV8P/jHNRvARxLSsUa4fbjMi\nM7jB5QEhUz/sY8Ix6mrbUsL64cUQVH2/NJHPtM7xDK968x1TAqSoaB0FWLTo\nl9KS7QAy2V/Pf/LSlKv2Q7UXaZcQCzFyaHLQhgPPgRKRJDg8MnAPxxPWclfO\nSYlXAvu/+17dNpwHNch83YyBCOwCMbmWgwCVkoOt/MoBSewNSRwdRespv4Jn\n9yPpPaQOFvVMvIKLOeaGlUpKGA/efODqDAweg8xKhadtkSo9ekVTLzFmVHQQ\nU7YuI9X4jDA0C2/rN6aFNkJLz0q3KzRJV5e0KZ9i3X52kIv3seps0MHDPBi/\nA3s4oX6khtyJr1y1AEw+u1af499xL5kJaTs+jWcQ6jXR42fcQarfmSWwncj5\noPMYvAi5EKYDzcRL9ibRlapSnGYyjGGzTXsbVOr+pedYIXshtweojh0mQ9UR\nyEjFKxS6SoUJN2JRuyjtm8l9inWv1mcRqTxhbTb+GINzdkn7C3hUO03qLcbG\n9hMWV1VlcTCWUQOe0Mb/wviKZq7k+SHf3dfFitg1RjFt8mC7BSV7d2YCJyvs\n0n8iuLFIuNGNEHxSWkDg7+EvfQs0JKq/Jm0dg1wihgeninRewWFinvY3dDnw\n3pRm2cnKfDwXOVMpmls8+PBWL4Sr+3qy2IvZLh2HvLdn9pAEkrdPviimKIMT\nmHje\r\n=FOUt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqFzvuBlAq6JpnYKIvjKh5xE9YSXNdoV5If6hb74TnYAiEAltb8DaRX6Hlnpa+C0com0pPNysRqQtYHx+U/1pEZuCc="}]},"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-ripple_0.19.0-canary.a0793c96.0_1600794246624_0.02904887642405596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.06998a3e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l5yskyhHFaemM5SAfnM2EbJLF6+8Tg9oGcRyLDOwWfno+IaVVS3uGZo4/DgkesUTRE2t+qu7bWiimQUgjg5EHg==","shasum":"895bf55e2f535541d95124003b8ca2628826f1ba","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.06998a3e.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGSCRA9TVsSAnZWagAAQQYP/2Z40yHd1AcNX9hhJ2hh\n11jFloLLbDVr3jF70e1PCeGjBZ4wiweuOvnwyz5Dxd/RCN8WQV73Ew+RNeQk\nfo/cBUvALVEJX56/pBdMJ7ZsQ/NKcJd5Jiy9B4wU5Fx0z2WCoQPcXY90xW3l\n67cvR+FvQ1k6B2GRSEk+AvuCUfY83sKqBZ3xbZPyO4p3FaEhRot1/VF6VKFq\nLie24QY0/h1kPXTm9Ux6SKt7nXdhjOSoN6Uvv/0SMlsjpuaqCAKNsu8lcyI8\nq/OntZMGfxfNHJjCJ1QhGDED6JJIeo6LQn2Te7ISyboqNjYOYjB8hFwHLwpn\nA94fKXM0GSonn8hbcHaq0CTOowBOg8rBPRIfnUByKuIME2q3pCDAmnod+obj\n/6jtpTJDiHR0rVniNT7acPRCtyCk038DpuuFTJZ71Ewn1nC7xKY1V3YpX3K8\nBEOIH9K7yoNxjk4RJw2cqWe2EZza+Q0Ci7IrerNb/RASkWaQMklg4IcuwCt5\nFXzD1DztJEeBJnw6rFzrLtZZTaUjBAz2at45KeKZx2OL28VQ5ZqF/ZoLUvPP\nTSfUpzX0LtZ6HdH71pvm8BWnzRV0C9iH7PYIChHOjIEQUTxj5+PUl+N7tLkI\nRByPFNWZdFjJ3TWwxe+kLpJJXh6dm2vlJZgQhFfg7Ifw87kIfMxN05SNiPmq\nabO3\r\n=a/GX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHnkVOB5RxySEeSJ5mLtffhxlFQ1HkdxQwvIBru18GnAiAVl64AI4nq9mDxqt0TIdvJ57fjbo1kOLmozwNKoYf6zA=="}]},"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-ripple_0.19.0-canary.06998a3e.0_1600799121880_0.5002662327515512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.3484a90d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mt35xKN6Tbc6KuUuqdh9CxXH4GwezX7SRIT5VCDO+5C2lQRpUhMer+P87vEOEpUwwtzLvYL09FBeO+FwVSK7Yw==","shasum":"9fda7128c5c217c72470198b4d30cdc555fdc254","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.3484a90d.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTFCRA9TVsSAnZWagAAQ4QP+wY6lrk5f+pS0tLe4mWl\nh0TUcmhcemb2ZSlIS4YT6tzZRmTQva4Pk9LctBqBCeMYBcnj4xczvhgcKiWA\nOquweDBM6tZ8xpK9VKRW/o5JZXqGFoAtWjbu8m1o2hFh9Rp6x1yfE1CTEAxy\n2BO2GjqB7YFq2mjtymL+R4gGYSVCwzIGW+RQWCXwCf+/fe/Exu/6h9svfpjL\nnJc4gdP6fSFdvfiR1nEiOVqEXKd76p6fYuw6rfHNw8Ejb81ECfLcGbipT5yo\nUEdpvoUgJWe4SlbAywrAGZy9FZF1n83OdH9i4TB4v0FocP43aOC8sFSDvwuY\naQbWBBC8ZABS/S8PZGuX4uo8qp1ov51jIcDEmIN8DaZhAjWFGugqVelhQfB0\naNLU3yY9yYyUFdUbGLW5z8omiQDGrCFs9gwMxOiZ3ZxeejldcAUTVt6wSJjH\nc2yNZQbfxVJnHbHhwsj2/gJZIT1SLi5NDyPSiOTR3d42avHIiJ/yOwnDKxEP\n4u7cKTgTia/U0J9lW69nin+IT1GcsXvfjAkWIin84kaTCZUCOh3X4tkf+ILa\nXIETuBxJNCFF/h3sIZyC71LDZxgOvg0d/VxL9qJ9LESIPyx0WIs7N1BiFeTQ\na6K0Ynq20yh9KVrT7Fdx1Gmk6dp1VZaZFTJ9hqtmDLLUIYf1J5eJRa7gRx+l\nqk2i\r\n=oAEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5cTxagRbqir14z0iQCTrfOBvc76T+0Hx996SjoVVEEwIgVEmxAqHgKRWeYQ+xPi/gniyHw254bN5qiiwll2lN7dA="}]},"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-ripple_0.19.0-canary.3484a90d.0_1600812228700_0.9940348956901677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.3f99af40.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-L0uq5POW9yULvtAvNNjxlybXjPGh+HFJ0Oq3ardEObLcEzyUj4X9fe0CvqUsH2AC9Bg8d72K88kir/lU1gzdSA==","shasum":"7e4cde438456cf041c09cb54640bf2c44982890b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.3f99af40.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSnaCRA9TVsSAnZWagAAf3cP/inPk7TrzEJycP6kfizG\nLWGc29FmjfftcWe/JMWlj+GBud/8+21u/jPIS5mEoyyM+gglZ1dUIyTXj/vi\nsvIEoAy2CRPwI42Boq5Bs1MwlSrvC7cuXoXIwU0uVY9H9I/zA1N5XnpWK9f5\n9ufa5wN5vVQGKbk/sgqanBZyA7dr3ilgqH+sRngbGeKPJ0QJZYJyBesVuDBo\n6xrOgR+aWzNOGTr7NEvcvXcvYvFV1fWJUMUV8zQuZJiczfywHJiYznOcr60L\nuw0qsQX632DYB1gyXgBN/xQFDa7joif7T4gt7sL7KIesnL3RXpwsRbV/I7s+\nnzkWHZE/8uZnw4EY1Gqpujxo0yGOLsJUsCVwM+GZb9WpJzTC6Or49x8MGax1\nvhlSxDkVSmZH/XJz6yVA2zlfIBWm6jVXRXnSQ7L3yU7nmAqoS1KBZ/odZOX3\n1RdFvLdmpbu7vs56sCQV1p1IwwB+edYVM11TDEBRNe7x6Ow7Zd2hYYJYov7h\n3XIW7ASELu71Wd1vnI1tmTmsB1/r1npGXRlHz0QnM2cRcGSwsjGF2trh9Bic\nZNbb0WCt+hHpBaXp6r8+RsrFmsp0pMRC7OUEDVvy2M46UksOKxigqUzZ+qUp\nhIm65uECGrPAleEgq8g1dSwdduzf/+BSfs7kbg8VTlwRERv2f7dVLpcXNucF\nVFDm\r\n=qzB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfq9BG/Bxqk5Q2oj1rQordDSgT2tWhj1mFDSn1HKOPNQIhALrJbxMSQIJ8oBw1s7A6mvsaKy538HJcmT8bqORi3ASX"}]},"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-ripple_0.19.0-canary.3f99af40.0_1600989658370_0.2695988590802021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.72aa1129.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AVccot5iu5Dy4WtX0GnQooo9toQRL6QeiAvdVrwk5tgVXUAznk2vuqlxXR4qp0FVNH1xqhnZYGfWJUgJGgYRAg==","shasum":"5323c11c0c5da43909a3e9a66ed93c6767293705","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.72aa1129.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblvxCRA9TVsSAnZWagAARsAP/1adpU7y3nWlpExWq8kf\ngLOGjbrOR/LkHpmtQBut4YtCJutcOYjOUhN9dJJaK1vKzdFyhIxytoFTWwK/\naIwhxJ0EDFA8QdY/lKGh2sSYCAMSJLHNvgHLSZv0WFO2rax9PfORJehdTpNU\nakscygFAr+peq8afqOvinlmam6tK//LOAcx7ugB5b5cUTn/wCTfNcxu3s037\npc+hfqG3/gPQFXcjcfGkMVlOV9+0JNI2CeEB2f1OLXBa+sD+z60eab4bMjWF\nQYij0SckTHsG4wmyKlrjrshoThrR9becbzYth8tjPPfuj3egMPAAbjmKwlrP\nLxZ5HaKLfbYMw+EgvPunlYdjL1TuEYGrM1mOAxmQg40KqJKZ7JhTFj3xwM8L\nc5GD3O3i/1uyxOKEJEV7onrQW89/JNpATCDr12GnIGL9m3KMDfam1Exsy1fw\n7xf3volqHkfj7QYUVtG7uFIbbgYS7xcnHMIZsMjkMBNTPGdDZE2ckEhA1NR0\nHu+NQaKYbd0Lt6BUJ0OYQca6p87sWj2Nv/w/Tt3baX9q4Q3u3+FcnK1+woO0\nNOqmfvi9Awkex89Zn74JTHT00WtxuNJA3tBM+MZYPwhEGiFJ3m8V2ihpOQu9\nsXV4jGEAQCLTdCZjaJQ4PmvnnCcdNTfvkguQTcUJhgR55Y6kbizck8maiPoz\n2S6/\r\n=rvwY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGIVyZeBMQJJhoQFJb70sudbFNJMPnXqFlHAGDMk6k/aAiBurMen2bkpClX6h5bD2Qq5DIzeDjeQd28nvsCXQlWFdw=="}]},"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-ripple_0.19.0-canary.72aa1129.0_1601068016462_0.9099050908644184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.394fd3f6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-J2Dz1ydKzUXAM5BvPLknBN0/gA6Mjy/g7ABm5cUEWkl7HM3eVxjXu+1JYfM2YzSJDNj11vgZPnQIFvfKmeBmnw==","shasum":"e7437e787ec68065d5dcd94681afad86acb16178","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.394fd3f6.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce80CRA9TVsSAnZWagAAjDkP/i1mLvFWmaB2KHv+5cAO\nuXSHLTs4QU+e98E4dTZ04hOm0OzYTLBeV/Q58gqKUSzZWSgC5K5QtmlkNOCp\nw841EdrsrRWe3O5QJwogFNwgKXHnmfFyO8MbZpVXg4LgsbOAW01szMV8bRvy\n8XpqeJ47skMXCG2J2VULzLHyho29g312BI1Qyk8Vj6lgJY3X6jeHWE7Yq/GW\nNSVFYZHwH/RfshuDwr58f8G1xeOHWTAswQMtQm7o9sM9RIXhuuG39PkCMECV\nJW2Z054XVXRiZwg3U3QICi3lcyLTqrlJtA7/GhSvwy+GKo0hfUbb3+cWsBzW\nrmnmUHBXQUHS41LBXFH1cjc8baTCv49YXWtlpMTQdgyzmbUeKUGBMARSjRGc\nGijNeK2Fj8jl1jQ8WvfT7NNCBs0lQ02HpR/MnD0s0AVhA3RATkWxNZyTHluz\nGgSR8vWka3CjGQ5q1FlSg3kOSagLSn+2p6azK0Fv7UqXuAiCDyWtWEjO9qLD\n3joCAsiiwHbvkBtauJQHxqmzqVqflOlK96cK4b8ic9pxdPva8K6fDZ6Zak76\nKydxtlEk0vBB6HGaZUd+C/E8upo2jOinFpI8t4/1yeFRDselcy6NtZa+tuFw\nNFxqOr0I7Vp/KBBe0ceRgGebwgt1qML/re2iey9EgE7mfZyxDVHBcD8kX1+L\nBsHF\r\n=8/BG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL0YYIQz/2u7LKXKoFTXdh4XXNwVs6qfHBrl3Nv4NHpAIgVKaB1qM+M/aac30/OGe0KslQtzzGqeL1F+DhcqEQWu8="}]},"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-ripple_0.19.0-canary.394fd3f6.0_1601302324251_0.5326026664627908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.347110f1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zn5W5FZmzzm3O/krNAM+oZGCWMWsXR47QJ7hW97z36MeQ8er9dUXoxjoCl/5J+LrhjUK+hPMBgJFO01V6vT5BA==","shasum":"1060378149af3533180590e7ed26f83cfba37f07","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.347110f1.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQvCRA9TVsSAnZWagAAAj8P/io+oKjZFnIKWZJiuT22\n+6jiEXmM5+YVh5lvWl3VH4H8rAkYrooOxUNXIirmbtlVChCX91wI3bVUXDXH\np61lyeaTSmnPmMux/mY6+nHNFtj5Wwn65+AF6lP9ffU+yK/CCx4aFY4scgki\nS1ign98KVrg15u0MXP+BKRkjpnd7GKu8pi1kllVt/Pu1uCb0siu6EUbLoKKF\ng28XkHqqOwgjSlpzhxkGZYddKYp07aDsvjEwpnJOWaPHTQtibGuQoyzwHOHH\nT67EvWWKzMYmAlZlluDqcfcRiQi50XZy09Y0jlpEgv0UadUcDZLoJLOGpcDT\nqUFx97XAlG8r8sHmyKxxjb8M0z+jm3y5XNOmoQhQC/VLFnrcSxbegoQs1tKE\nVdmmkvgqYIpbnNcUfMdkIYIs6StBiD2TFH0XlrlVo+2BYtbmv9pTyMmIPK3o\nUiqmXT32Uwsm1U2H28gOYPZ2/bNxMYs8VXapT8VDlCXnmWtKmLb/iUsIs2Wb\nJsKGJ53ZFFpZqgBkw4h4Kxk0vsFpRUNUXvUvkUh3B8kDwHMWmzWbXRn73wCq\ngeHzPzfCub0IVTjIELuoV0HpzyTRJ93WwIq308pt4sPrZ+pbYUSzFRey3/i2\ngoswVawrJpzsoICNiNKg+xZ8jc8m+3lAlZqvN8/P07LDleBSgWaKi0TagoA7\nSAbI\r\n=/oKU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2574YtHg6sSDXsl9pdAr6ZGdi0keHigMPdH9uZf1nCAiBV95yIKJGTWI6+C/TGeObikcjsynyIHTim7cf1pl1MCQ=="}]},"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-ripple_0.19.0-canary.347110f1.0_1601311791268_0.3093698996360388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.5e330bb9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gHrbehfR+88D221Pd7KT7/n4VLWAajrg0GzoQzahGa8MrFugoRQEw8HeYS2Pj1eORC/6DXIX73hia4rmEEu/2Q==","shasum":"edd18b8791c4299db08334c74f5eb0f328bdde75","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.5e330bb9.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAUCRA9TVsSAnZWagAA8gwP/1djfb+sisykCYu+HFD5\nPO0bRE3s9RKIhf3jDnfgkx4v8YjC/gSB92MAVCsGaa4PZbLsCRj5MEcqJCPW\n3539R9XZnno6coaBQTbYEvzGLBaRfBSafoFudKYppqKtv+wlHIUifY7pG7pd\nn2+Di19V/27nz4OiOdqwjOfqK7ZMewgm85GfA20iNxmsvVilMe2Bhr9DY0R4\nF0NJujhCIf6Bs+dHaH12h/1J0tZKa9Zv3clSZCIoqbrjFtxs4wAstElpF/qZ\n5EkhEMIPYOo893YKgcUxcsvo3Mtx27gbgqOPCPBA69aQbc6f9XBhJBHMgmGH\nhE8UPQcWxsKsCHIcTP00uAZH8E8LJNH5MVaYjbNwD9iXnVJGQJlZSvVa39LX\nSJWat17uvegKcmf4tq7ArZwI2GJOEBdZ31Uos33R35rOwh3xuTYl825HGpAI\nTm8rqnlhgfV9NefolAonb4kNjTVs5FpWOARA2S8Fh3DJWzOU3SiBOknkK/I/\noXlCUR7x/MsMFLkaLrdL1Y0juXOj2rmXiNk6m55q7Y6ChQY5nihbiyZcTfuA\nOZnhIXNXfhsnm8zUUbtOh8lUayU8DujnGm6iNAicQa4a8ASC3JWX/7VAjD+U\nmzanntfRROIvHhLltwaPtAHHYCzxymk6mtydth1vM/EZMglhEc22/njr5rZN\nhADT\r\n=Zo8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3oSvLKpHr4IVcjP7hA4Ea18oVq4rWSvq7BZYdNKUq2wIgCGdoThdnBONRc5QVIpaPZOZYpP/bkll0cbnyTQYmHuk="}]},"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-ripple_0.19.0-canary.5e330bb9.0_1601503251580_0.9783883163986491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ooBxXahQSBiL3H5jlnd3e2K9MG7wTmhffIwvePGSbWjE6zRpve9poph+bUDXPVaPgfXjLbDqbvlQ2yrrYruoLA==","shasum":"3d3488520aa4c7aec5f27f1742aed308762a2726","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.30b9e3a9.0.tgz","fileCount":26,"unpackedSize":90641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQi9CRA9TVsSAnZWagAA3I8P/23ghsjLdyl9x+31c1+U\nJl9aXQmTYIUJ3JLc6jxFe9JD4YXS9UOxA/7wIXUY8hDkOz5CMtCbGjtPIUhx\n22FutaqXhijAPd+k0/lWnls54U73x0EU5yDaeubnaD3kgw+Kn9WROffAvR7c\nmiRBpLejczmkBDQ80IeaUx/SPkeWcIRbuXpuOmeVXR4HG5oBdFLTmcbZ4W25\nfEHLA++xfwqiXcTGB7J4rMVM7B/OObn7L/MeJtGRFtSAbV/jaHr8W9jMf6EU\nwxaDkP2yyO7jaGg9VdcChAznu7QqQoSG/0l6tSswgxgyioV8jbuqgstODDpg\nD7548vESTh06A7EYq5PQho5+HMZed+STn65sF48qoRq6EXyfSMojJyDOlW9o\n9BYpVlw1nxSesIrtXlaw1Y4IkuYh+KPsEaBjqraIZ4HVbOa7gwGbMl5Soyqw\norEA8gb29472/KYZoRoFpXJakDIw4KjCl4RDxHAfsd9qn6j6C+CfqgDqqGIA\nca8m7zWVCoRl+/8GI2GAsSDs4NnPgG0k+dDFxyvKLS5DmoJVq5wc212Vb1hm\n4aPYUITXD9tn5z3HPLle4Soo/cEYEYxSwRU+i/wOy7gN+DpBDCk1qdyS2Lvv\nsTK7XNqgHvmi4eFWOqXgTxZEDuT4DnhZXM+XQ2G3gr2OWcpx+FAKjZF/fb1a\nQdMh\r\n=D+n+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2/yL3E09rhtKPkozL0SdpqEIBSW8DYMpZIHczQgd3BAiEAhok5fSP2tBWZjRnuE1uSTF79sP2YCPDf2JlxJ8Ic9aQ="}]},"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-ripple_0.19.0-canary.30b9e3a9.0_1601505469222_0.05445782604993665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2Ga3DT1w6VLjrZQK3i1FhVDO2pAKom7wsW0yklR9QX+vgLfj91FFJMyBxt7d6Tn7J+SArfwCtwn0gyxXOWYsZw==","shasum":"ee463f44105a5494f4d06bce8c5dc0801be65a31","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.7bb04b9a.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmS2CRA9TVsSAnZWagAAxksQAIBEgAgSlh4XJ6i6TfB5\n+uYAHZyuInysvf6v1aBgG67Sy4kt5zBVTOmDgSiCEzCWsGZprBj7CrgQya7M\nureRhHwG3pozJgqCPum+4Hy4Pk2BhbyaI+30GiL3EDwFvN7YcifRZpY7UMqe\nGzxHf7/hVeVZUAD7DS+1MHc8XQhcwG2CkBNGrkYUnaYCrSKd6cvryUuCMxfS\nHfDwT5QP5iia80bfpMbhTtrYc2kHmcTzCihsYY/qdj5rnYE3cwbjBBXWw7QU\nPbHXwwiVH2psSpKdSop73FKo5Gl9r9ZZH1u1rq9PD/mZ2O6ST/gHD9Tedkof\nUavg44vCHWfH6AlCNVErZdvMYiUQsH9XYo5xY1d53nRJY337iW4qmacoA32D\ng5C1XgOf9YRPv6CkTevh/hKSktLe3nVNo+VC++676JmWmYa0c5AD0tlCmj+I\nPLYInAFGrvjIbRmfeHe3ItKDFifOCX8FXJQ4OF7zTUht8HhxoW+ndtN6iCXw\nTK05SSVPV2gbmqPti9oP4AYzs997eht6+b77LNpQ8FMjEJw/vUil2TG40lFY\n0yvkzrOE+6gJbB8ZoRD6Y0avS6TFt/j82YHxUNjYZIJpKU8s0DhGVO6fdmaI\nCT2nMihQGfJbMo/c2mtgfVCFohQVL7wk49HysV71h9OuXUBJrnns57bj9WHI\nrgc4\r\n=Y7ik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFIFGvdN1D8PsHwEV5icpZEevXyDUoYJ8himmltYz8gAiBgKXgozgLqSJ5FjDrY27PHCuFMH4yvyUsvbwSlGgnJPA=="}]},"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-ripple_0.19.0-canary.7bb04b9a.0_1601594550135_0.6958837467809729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.615d861d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-K9Ufpuef5YQjpPwp0ZC1LhXtyyQmQUxIVM9s4bfj3x/RA0imhLrZtz/YRYm2o2Y8dyCmJ+XjL+1NaU4CM1J/kQ==","shasum":"393be9248fb33202749c118ef3a4ee1d4497275c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.615d861d.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNSCRA9TVsSAnZWagAAfQQQAIsbBQoWuxpioXARUvbC\nSEZ111+hLgr6r5xpGOtj2n+G0xIPAxZ4z7Mkqib2YFU7yPFlIkJH9S9DvOxW\nrW6Thld+O7ki8A5lu7mIg8t340AfBXRos17Qvh9Enu6TXcXXiqdQ16W0HmdL\nBb8RFxKU6FJCtZIpsZVQbuR2CJLGG7gAwH2xY5ByuAmKdocMFfte0WrhJZqM\n4f8YFXoituGtDJeiAdP4t71qrzDOSUzyRbs0kLbPF40Q36sVkAt+QK7mhvAa\nbRBBlh1Kjs8iJ1zbzZEvuJhKodQaBMrmbFy0BVPR+ggakOAIU3Kb8vzECKK+\nCuzc1WeVo3m3oHXtha1keIFjuVnZb07x5uZlaNHTlgLrmJU/Gg9bMcHyXOsY\nS24/yb7Flaii4w6pvxE3jiEArlJOhfNTNnYo2vh7LGbtglT7GnXkfHzyXEee\nmpd3w2phfve0IlZ+nN/QJ/ohWs55G1T6TE34yoxWGGVbn1p8LduFokgeZf+l\npRKaVunaLurjpnc0bsaxZWERUt6cndmoSpF2cSeoZ7RZGhYY4hfZJeBmVTj5\niirgJtdjN21V9mHaNtoVg6mm22YI4iAE4cL05/suBtQ6DyBpfWLFvURZ0b34\nEYMPqhcMXHKGvtugSOf5dt0Kx6ii8i0C4Xv9LrD/E5nuV13GBoG6wkaMN+pE\n8BWJ\r\n=mwHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpiDDHu9EFBZDk0Tgc1j/5vyhY/JeWp7Ix+kNxcK3xjAiEAve2zf9jbis99TDyTNu0i3scLIFUT7xiti/ca6Qq2j5g="}]},"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-ripple_0.19.0-canary.615d861d.0_1601602385948_0.2994877224082779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.af110e86.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eg0wE2dGvvB7jScdUnztET/J3tJaWVwclnvg3bFGOuevI9rZko9E0rxRTfGCetaJdH1cTymrfN0mrsBOQs71ug==","shasum":"34d88f6e35c57070c5ef61a82efe0cfbf4ed350c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.af110e86.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yPCRA9TVsSAnZWagAAr98P/2RQAsG72zKfaV+IwkcT\n74ZQjvmXHXmDWaaTnoXvczbc2eLdtEnKl5AozgK95fETl87JhQi8g/tYtshV\ntZTn/s0CKKoBI3MdQleZHfsl993giWY1kaf22rdy6s2DiIYFoxIlDgw/o8vt\nNkTMuFNeJihUxvWZPQLYbRUku/TPO2LPbIKDFcXmct3w2xrn/yj6ZXx0DrH/\nNjLwYdT7uIKWWEODJnLhQcQwDZdVKmdT87hlqUuqMZ1+dlSuMTbnDssIuH2U\nKF1IBpsDJkIIDm4h9HF2k3ZsE8WRGRMNHM5z1G6Cmvdzn7o/CzHGvyTr9OlJ\nbyizOjIFx5s5VWYpW6XmDJ3cTFDnrlHd+PQED2sTEHHnXnnlTxEKSZyWfs0a\nIN+nPJW9HHGH0M6rEKtPn6IJJNRyaUNzMNfxxsX6HfJPW4voyA5BKFe2ZYpt\nLAnNxi/LGmiKBRSNVAxG26cNOkwOjflnGHZ9SRxlnpCtJRtbTqoxroqD30BP\n4MO3ipUuk3RMaUMEhg3LtC1BcqDSW4GQtvFFZPWFU6ZbtK+nYKsP8ZId+J7L\nkFzq1H/BPpwnhMoYY3dYHN1Uk5pJD6NRYc5dbWiQEp/l2t1JRZNUtx1vUPEc\nhO/j8qbhP2F3bdcu6lNpabtAlIAJP6SyC8tVqeDp30VqdFWK5/dWbBhZIPk1\njE75\r\n=ebu2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAr/sYlzkMOkuGchFxvZ04cYJHQpsoGsYGw9Ykp/t8qAiEA0sMK6hoYI1mHLhCzYTxRYD7UKLsytrDS984J8zCXgKE="}]},"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-ripple_0.19.0-canary.af110e86.0_1601682574729_0.6537716503241706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.89d27ca5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CoSY1/gYTACIvOQl8M/1y4bpy6wURdeyi0TU//7X1I88X/6VCABBjSl+0fXVCJlibJwsWNHNAAzoQHWq0qmw4Q==","shasum":"15f0ff2361e20671aba56fb479602a6f28a06c58","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.89d27ca5.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fXCRA9TVsSAnZWagAAf+QP/0Z2rIiEIPidn9N+uiCF\nM5R+dNx2DBBre29gabQnTCu/Tnb73IuocM+IIxWQ4cxwUyOGKQQbqVa4ieDT\nPsI1mMOLbYNhmDX4fbGQ8Puii23cM9ED4gVhFGBOLeRfSu30YQaOFz6FHh11\nccMfXiwn2A5G0CsDhFcZKZRh6bkpdCNsL/N3zdiiFWksxx2/qLaQEkc42OqR\npfiwhPeK8FTklwuZaMjrn93QbbCmsRuE9aFl8+ip7b5xYwTQCoHHlWvcJkmy\nrgIksUEVlTn6sSVJn8IjfF15OUdvdWlKHorEkuMXHgWcDP5RsQN5kppLFRpj\nzJzW46tCrP+4e++++B1eJ0RR1pA56a8gbMPjqT151UkQ3p0En2ZcLzoZU4CA\ni2mendrPacsXuoTObRt0sRe/A2LQcSLXWnhFrXbQli6O65mFAuAxZ5rtE3e1\nS7u4aP6rCU2co+dkJb15e8CLCYPlWJrmOaLYlOMIYioxN1cPJR+vtwSePwPI\nxfUBXV+6MLSIU3zxbzQfLA44PlGhaDaLpqpQ6r5a/v7yDwCX4ZfKh/CvepbP\nWHuslBPb2I57P63u0pGdc2VAVgqjh6cDtXn3LBc8IwLG4+0L5F8GnFBn+xdt\njTB2Pzo+D6NuYM+AU+Qp8OQEv4sy3kFaw4lalOkaXiW8Jp0xPxsm6wd89i7z\nBTvH\r\n=1oKT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvgTMNn9D6ls2KQ69I/vXUL47QehxoimiNwtCRTuyhswIhAOlAeocQtGq/WGEa/E+XyuKOOMyNiHkPVl66b4flVke5"}]},"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-ripple_0.19.0-canary.89d27ca5.0_1601947606918_0.41182503474959176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6upJCW+zXD1Okgq0B6F917LgKaJP9Cr7Y8pcLFy5TKuBcM9+h5HtnV6zyAAOh0FN6S5QBTo+uE3ngX/BpdJQHw==","shasum":"6e1897784cfd3c42c9c9e8a3f8010289667343c0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhNCRA9TVsSAnZWagAAvQkP/1zJtJGn7G6foKklDP/G\ngg9NVmktJSPxZYFojJ8/rUC+XJBT679cByiPXwoAsXdLV1DZxNG96vlgDWox\nousTnvrZEWt7vEH9AWLMhgXRdQUi0d/ixrMSXMOOD3SQZMeN0lQ7Nfl0QEBe\nuWJ4HRODl+sD9oQSVqt0aK371mI9vJsOcToujbh4eTSNOGD3T2cF25hcZVgb\n/utqPuHtAuB8vvVrsoQ/EtCURIe4zyd+WNHYsB2Kcs1lg0iIIMckMEWVg5ad\nK2dPqrOXW0v/kditHLj+NHNIz16wRLOy2o9fOSeuiYKnWSdGIMSvg+TryBYN\nZDADQAD490ooLn18YtvlarDmKQ0PBGF9Yd2eDiQ1hij0ghsLIuQJv+A6RzkX\nnSLQCzA9ozt53KzTbqro7rr54x8DPvFFSDmiRaClUMWE7j0GMUw3IxNq5IH1\n2hV2p5TXGzw9BHbOa8BQTu8qEj/VnVL0R1LLn9+3ej528ozc1O7cjMUn/vsT\nhG0Pmluemg009hGasKnUWeoyqknAuP/Tod+iZYQQ2zgGDUgWGKE9HaH8Jh3s\nNmMFun9AFWMS535WvC7JlTRmvGhYqQGVKXdROabbV5Jmg0NJ8rBunGGEj9CR\nnAomoQ1rL7si2wIT4Nili8ORSAST+JVN0kMaW1biQrZCawcfGsOal9wI5Mfn\nc4pC\r\n=NI9N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcwjKbKZ0yDeYyIzViX3h/tKvT998ijfrM/yD9JZQjRgIgJJ1V7atjhkwDCF7fn1+A9Mux4UhK6u6MdL9FY6AcCFc="}]},"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-ripple_0.19.0-canary.9ef2e7c2.0_1602029645343_0.4120092125558912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-ripple","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YQEzFQfUc0tKf8am02LYiaD7N/yMQ4M3FSrvibZurVf90KntfvsefXj0svw96kd0qa20FVruwCSmJqtcmLjzyw==","shasum":"d82290be0a52de07d5b43ac5751c5275cad3621b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0-canary.96c8bdc1.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffh/7CRA9TVsSAnZWagAAW4oP/iZdW4rw/4cqOsYx73Zv\nm+/Ew7ZCmhpv+vaN5PBm5wYMO74UYsWygmSY2E1U6ACCpsv4Ucc6flRo1+mx\nBQg1ZiQYFfRoffjCrm7zis3ASCipwOkDTqCwYB7O5qQtu3JbGcaQQuV9gYaO\nAjTbY1N777f/+tCxKIe4qWlwu0CnoVA+cH9Du7Dm7XZz4Q2bgOE5WbpdReg8\na8xvg0H6ZGste+9Qvt9YRPC0Vg7c9vjoR62/xGF+N9Gvwuymuhyr0ce/2Dfl\nfJdZD5iEeYZc60PJ7J0FN7x3OLxreNqGP8uXcmL4JjZE2lfqBGcFqLNrQbXn\ngp16k8QefO0MxcTe3WWOM1hD35VGr5pxKyW2PAQNJWIKwgVYr1dzfro/qUU+\njYFnD4SntZmJJg+QWKjwIFtNKguzAkUaEGxeu6zwyXBsqqln4SfyiFvDUplc\nfbwgL1s2XvJEs8sCpDlgtgzCOCS/PZvDiUpNj0fWnzMOIVuzFWyK+ncJpxtL\nTwYFqrzu2oQNMJcpbqLydg1ITdd6FwjdtnPE3GIrcQfQinJG6ACV9/KWhOBB\nz9DFE0YQmRtquDI6eJxUCAKCp2wc11cHjtv/PUQLhJ7dOPWLyhv0Z7ePS3cP\nfh9O67lm2x/azBMCcsvpDjIMsNHw77omVoRa/CNKgwOcqwOgB7bo3FeauKBq\nXFqK\r\n=X+eg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwx6+bF8/8JvfzlyAYpoz5N4YDvXtcd9S/ixr9WaVd2AiBPrgBduJ4YtiEcUq0iz4JFA7dvR4L+JgYUfLCsv9OvVg=="}]},"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-ripple_0.19.0-canary.96c8bdc1.0_1602101243223_0.009574710899659555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.6c21f034.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-khxELJQl9bXXZMiRHg7vrKk/950ji1ayL/5XiK61v3grakEEAz/K88M2ANi7PpPH+h5xhJhW0qjcQto9vaZwng==","shasum":"33940454a9ea543b2fcd6f54144523231b47389c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.6c21f034.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkF2CRA9TVsSAnZWagAA3+8P/jE9Rx4pmDnSsqMu1CIN\nqAZ8rpHPQ+v4ZLgkYCkmpEZHE+OeeSU7w2SWxXqBYWFVgKwVfgsAumNPDdTx\nTPdbNqtuDfJ12zvyVpCK6dEfxlt0XIk62gUqmHvoinPGygxNeq6PkawCAzym\n4wy3nVNiKaP+y4+0mZQ3Hk45PY/NGkQUEsHMM/ygcEHI02pHOWviYQvVkf2C\nEkRxY/x2EfMMOL61XLNeppLSxVuP0IYtTb1rvpxFgPOcF3d3hIb9hq2yM5xa\nrh0LjeO0V4KljaV1O7IewjjQDWYRfawDKekmn4N3OLSBmqpGxdyAD2OwtAZh\nzmggv/Q8vgbOcJaa6HxXDUYETtR8yubi/XrnTAXVOFhMSQpe948CUAnb3OOC\nhUG4RwzVHj6bkRFz6bfvGOqZs5H7xoJmSjNf8kT+JQYUid3ay13WNuvVjjyz\npjwt7lH/Ba8wXmS1XKdL9u6G7aJcgdYv8xda3MmfNPEagPYYaimzian3jGjK\n1dKmidL+l2JGbyhOKW+a+joq0HnU1NxfVw+pBpn3q23tNEXM1b73gP9A2Fp9\niCw4Xdh8qryovZ2yuGnZ6unme+L2ENMnFMUFg3Yrp0Qmx5bBBcH3jhkCu8mU\nYJrgO3ouwvMBNdBl9q4TAHlH98pqs44yL2J6S5/sD1FQr2WrXZPaMbR7vnic\n4vZ4\r\n=vOgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQc2cwkub7kAYZZv4x7YTcUxNDznuAjkslKER+nBW8bgIhAPZxsjMzAOKJeSp0uijzPb7ZDqBYxzjk4wgykJzuORak"}]},"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-ripple_0.20.0-canary.6c21f034.0_1602109813450_0.40813368614699375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-ripple","version":"0.19.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"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-ripple@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-932JG19pGbUdDlaOCereCVzWAzB00PM7L/QkGG1teDM3gwkR3evFnTXTYPAw/kEQMYUYABr56DxZhD5MQ7yexA==","shasum":"dfd417fa9967d15c55589b9e825d1ad4fc415471","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.0.tgz","fileCount":26,"unpackedSize":90600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIpCRA9TVsSAnZWagAAUU8P/0YzL5g0D7PwUPreLtS0\nn2vqBOZtl+M13NfjN90W2IuhM5xd5yuWcJ1i15FzDcwcqMqPWd7Cr6OQA6+x\nHqPWB6CUmC1gCKIkDF8+TYaVCixiF5JowtGq1+TsTm/BVtXGXy3eC2o0omZH\nUDPJ+Z7cu6QJJirlpMZT3nTJalUIC48o+rr/bTT2U/XqXmFVoqOitTDNh98d\nzTuOOGpGNUIi/elNEF0KY2HPDKh0ZMJ4qI5lNJYlFcaR3qIW22gP59kb8uki\nny7gY78p/yD3zsDQxZus3QBpSLWiUJbNudAbtv/KP9mnUMMqhj2ZxXQndn/G\nbcatQcucEsuIj27rCvqic0YHZCL9s3WCdO3gPAJPZMXwDoq7j+JC+m+OQgHs\nilmKqA0Crj4tEBqEe7/T4Bevoc9Nr3IlEz8KTKu4x6ERjFr1DzUgu5OfVRbm\n2H/e2nOqScttXgsUJaMXKhYYLvIz1QMFaePFbw2TT/nzBW5ofScdQV2s1w3G\nFZMpWAc9mPwU1Mi+fksMTf0t1Zdm9ZLfhliR/sia5OAft3B6+3Mcz99MIQ0W\n4Nc9xys12fEdC6sqzCOJTnA3C2u9RENl+bv88AlJCpTuqJQdBA72Az/24d5r\n70s9U5crIbgbwADxLOD9oR3M65bTxSI/oRW63AxfwJBdUcdL1/zThRcr2aiC\nP3R3\r\n=ZuDW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBItOyqsU7IBjAATsyvfaM3nSkLZHBtM5MBF28gwjNQQIhANDCZVAMxVEvp2iOxZaWajBqzKPYPAlAFWo/Jm4SUcKE"}]},"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-ripple_0.19.0_1602109993335_0.9043976410654699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.1f026aaa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-xbyaRuGxjohDWaDnvuhFDWAdsCmB4tnr8jfI/4fWfHS9wlJMcrUf3ht3i1ObgpoJQIiuie83pQaf378V4ciDqg==","shasum":"40a09446678dd7d7b07566c40cafa4c430470e98","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.1f026aaa.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hlCRA9TVsSAnZWagAA5QQP/1MzK73I4fqsOVoRBNvJ\ng+10Qc8uZUNPOnjWXY3dnc0EIup1b/LlKhsTojRnEtZc/ahktEP+YqdJ9fv3\njcaK6QRfcyXH/UbplCyrSCNmJPUG9bbdFtiQVu3XmdRKpDWX/bVHJOQFNNYk\nEKkIrkupNRwefHOkzMrBQg56MQvY/pxHMv0EM2sDTEuu+3HrQk+V2wWGAbwg\nS+HVhBQpd5HyleG1omo0mpXuQnHyrtZh6mTSRElOwexWa5jT+6awY+g906pV\n8uV+zhcaJLvygJIPF+1IcTMZielZvo+AN/sk9kaaaWJNJ1HhfXOq0O0HRumA\n9L/2F5AdnXn7HIUD4xSkzUesU1WA8pdeJ+ve5ONbJYHn5yFsi3KUwjs+1K+G\nCmc47lfj47qAiU1AMXfc2UOrlipYilx3UxXaeq4lu9jxO/WBV7c7R/EL1QND\nmTRxIInVg50BZkO/WiAA8LbR4f9thfBWDuJomXL2iB9hR7eobH5NEBl3ond2\nkwS9bUhGI6QnvNlPbskf22P+JkrVCZFsgGRT3Kjmy2SDA8yOcf7Nr1N8BFzo\nLq85ypbmsHCxkvyzFHT2/FnpYCbgQDQJ4Bq5ME5NYBYQcwSUVG/x7dEACFng\nSx9cStMMW46dKUs2Y3T4BTbnfc0X61hIFITxewZb+yFrmIYqtMtpSaMe44wf\nLfgD\r\n=yg1+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFyKQUpyNst5lY/5LH/uLqzmDCQG7uKf29oTzUg9Y+N8AiEAir96AEua7lWJfWIPAIRkV5mWRgKximvCU5+6eidfTR0="}]},"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-ripple_0.20.0-canary.1f026aaa.0_1602197604555_0.5153275384635163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-ripple","version":"0.19.1","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"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-ripple@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-nrT7tNMsDV2Qx0dyYfFAQy5Rwogtip4UCX2CpHL4A5o9Ba1XHiEqy/CRZmijjxTK6FO1l+20efKPYE4jNlZk6w==","shasum":"b40a4668cc2a0029a3e8f3a81e8f80d76a754f92","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.19.1.tgz","fileCount":26,"unpackedSize":90600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tHCRA9TVsSAnZWagAAxoQP/RqEWgoaf2xSNJHpMLAV\nX+58/Qgm2RXHI5uat2PfzToY3xTs2aa3a+CgmYIwVZZ2hqbIO2bgHYGWrvM6\nKLwAkEFxIXXWgk3rgnwlFUBj74LT5RzVHgPeW+PtTQb0MpZw0BacGjeDSM67\nswostzKvQ0A+XMB69SjZdd1k3SRFgOY4RSJr2D+BUxkoBmJ05E0NQhYFrmdx\nd5cKuvc3vuyC3gwXOMrwN/N561ZFFRIPg44sFfdYH9YVluKoKCL8UVxKo053\nGldugSQSoxrEich1ze72q7xoMtXj7t9mKwktGP2+B8RLo/lvs3O+4AY1CYmc\neM9u8KGCsd9Q+EMl1lFA6mNKNgHq5OblFSKL5uOdVRroBwoZJwSppFJth4YY\n+CqO3bkJNgrCN5yvIwf0dO9bWh2RPlpAXYniG4yiz1/Eq/V2tftau9FTgazw\n52lcU14sRFTvdhLcs/AQl1tkEUjPXstsHL/zU9Z8QgQG1lgk7DZwWVS59l7b\nDYxksEPZRmmLY4de8X4sYbcufPddeXmod+MANY5nNt01/0d13W8JwYBPnqRz\nmjdGHNEkmf8k/Dpdb0i5wUn4eO2s2vv2FQuoBY7UDvQxTMZMrdebCBGjg+au\n/qKAs1jaC7fjp1CNeJ6ii4fz9tvjV5DfOdbpW048Sz7PAyCK3pRa8afEsXu8\ndKcr\r\n=uPEf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdNWM846cgphtadgTaUWlleUHB6pYGNSUkdNuTAZdiWAiEAhCohQo0hpGdtu6hALx4n1/qB057TsI/+srzRPluzRBM="}]},"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-ripple_0.19.1_1602198343346_0.24494586369402516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.5f6894b1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vxKbWb5alEOwOmRTeozWDAINXhFh6EDRHx6eTsXi9V8x3sO7SDAE1nu4OY5+Xqb9T/Lu89cI9I3c31A7YnqEZw==","shasum":"f335f98f60a47acdb9637ca8d14fc74671bd3f6e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.5f6894b1.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uACRA9TVsSAnZWagAAlv0QAJd5ye/LPLGKbFZYtTHF\nDlWlRl9678D8nuMbTrtELoCfDfht2taDFnlBuc+LFc1IroG8AyB3Ect22r9T\nQyQLhbNQq1hIX/0evozW0hA5JlxqxLGEVb1pxN42/EegSXCQP+bYVca8hiNJ\nddatw//8ga3Xf1pMTKydyKLClnNlETisjT9jDnCIbeJ0tYOehJSCuUuAI4Vm\nqgKwou+MdY1zB/34ZSg8meScH9adi/BiGkd2OZvlhz90PdZyp+awVmR9yyfK\nUGzVBaWMjk5ET/N+1HUuPRdu3bWK4NNXcl/IusLPZ5ULQoUaNMUkai9pCvhe\nrki6aapZhG8XF1NLf/xge87u8BlSq7SVdvBxi8t5jxQJTFmKTHwrlMPoiWzH\n4jE8B1utk3rqwOxkrftvRa8hTmDgmCs5SrS1Wun9UxnJqf/5UyeeQyT+zhQ8\nonIb/Bu6Qtda3Pdi2kNaKnL9YuruTH17d/2xS5Ia20jlzfRNOn7Zt5pdqv7Q\njJnkVoedpDTD1T0ySOa+99RDBMxIqzf82574aKWw4xDkzyd6Qlx1OUUPZ07u\nAxpwJ7gYmrW9iQXo3GZbKv/YKx6DVB40GekqKq8C05llde2kb5XHP3kY3GvQ\ngLe/f13zzat9b0Kde1Q70r61zvkB0fZijUxdNzCP0I+MdsF1RNYyjbKtcW6H\nIYen\r\n=BVlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqHSFVtPxXvn6NFKwaL6oAZaO70TgqOOogaMvXp+i10wIhAJ9yBiZ2yQO40lfbZIaL99bIN3SNYm3l3RgD8Gkjcdhu"}]},"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-ripple_0.20.0-canary.5f6894b1.0_1602198400258_0.6497568039611135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.f6260d06.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-xtEA3kdDq84ooSfOr8oO+Jsxb9j8aBwac5T2GTcmDg9ueVGwgaf7i9Yif1YdlJd7Xj2gIRFrT2VzGdMjAQxS/Q==","shasum":"b626b9db4353c019593015d2871c1862739dfc88","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.f6260d06.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnaCRA9TVsSAnZWagAANR0P/0FvKiGOnT4yzv73nHaw\nuaWDlH1TyZoEYY/dp6l0rBEETSyo1HVVntI+yioGhkPKqE0jo9TCOtXGkS/i\n+6Hy4/a86m68RfFrOO35HZT1l+KBa5iAfqJBU9pAcr6h/T8x47IZ7FxnksxD\n+ccZU2TalwSOvhOcWE4hd7/vXnga+zV78mbsvhRcTaehySxAUCi6QqrYBryn\nRlWV8D7rEbCPscHfKAcnBFtcrecWEdEmRgGhCr9aCJLcCkHxsiqnMDTaftXF\nnFXhXRIrIXYfM0+MdYeIKyiuZqIurjQiGc06uBsc+cMx+uRYwSRpbvPnUl6v\nL3llIWi+6lx9hBqmS05JA5RoortYxyQAKMEM5KojFrYa6AUq2FBUg2eWnP7u\nbLZOv2kWmFTKGGRsHmCKJ/roXO2llAK3M7hOXxnDE2XtzkNQU/Yqeg7gGrfP\nMtvusx4HKRJ5kJ3X9qZlg7fU0E2v37/SYUUDHoiATWZa6BWXGlHvOnCOPGin\nOsLMZJa3WvHWifBqxhSHcTGZ2NAi2Vip4p73y/cGw0rL9Wg9UScf30LctpiI\nylL0nnf29KKtPcwwqyWRJXIGoykh+lgixt0LJw5o8bPfZjwJ1KB0uxaqiwU2\neQ4fn/INX2zAjlAfAe4oz93Vvi9LFra+wTs9QMfWi7IUAY9nxu+SUfjZHhXa\nwM6+\r\n=ToQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5dnwJEddKYA8GKV/0ZdvcTAAW/NMGAXY3fkdSaBpbfAiBq49gsrp1LrXqvcTLik6MIVSUrDy45l719ardXhZPB4Q=="}]},"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-ripple_0.20.0-canary.f6260d06.0_1602542041799_0.001215664730805921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LUArQAAIPHuFu+IhjRTaCfOsxdLqJLyIFL/U98azBRJjXP42yONIXkty4cQKtjySMJqXOkOY//FiTIhRHqzoYQ==","shasum":"fe6326e123d0cb55c6e36e56090f6d725895af65","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.2d1b08aa.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5PCRA9TVsSAnZWagAAoJ8QAJY8+4knscYw5a+JwHr4\ndK33kRzNi4z3KqSyGJfqe1F90OH/5UMkqKt+TShwlNkdPo4atBz+mAFVFB/s\nS/FChYHnayKVphlPgCqEIVeTXW+nCbysbBUMgMZP6w1sl7fxeMdy68+T4bTM\ngIl8DHYTojOTSHO35EMHUWgzXA2i3ujxcJmHcEuY+vN/OotCD8YCLwOv+2+S\nCNJHy/dl32lDxQzM/mzwN0cSZwme9R1QquUFBHrAshkuhazplVP7jQ/nj2RW\n4pobjMY9vlxRkgBHhX8Hz0d50O8MWiinX4jGQ5LtY/Eb2aOyDWFcBPZx2RcY\nGPd021+3QoJxScrnLdtHEW8Mjl9nD+tCTZRdFxG4MozjhUuePprLs9ncbVsk\n4Gbr469mcjW6ak6JJ42vVkUZjDgyALYOtYY9MDTDwEA1MSb1cHXTYDRkACyM\nRSFn+ddWyOA4bgfjBD+QepBaDzxiLA88vmq+eiuyOc35e1acp/s5mHp7MveS\nkVWKUPcYLB5hHKppL0KQ7sjjiIquTv+Q7q1C4c8H/PSSjzln0iAsx3IzBjjc\nCHpaEicD4kp7zob6fkjgjiVsi6I1pQmthHgWSijIALkrIAf3syaOD8CZFS94\n9lUYlIqB7gpSn9wvkJ6CB8pDXLbbcHExfI4rgL74EwxvH2fmhJDODwYaK3ir\nJntA\r\n=ULHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWnAjBGEjNWG5rugsuCZQtE0m70Pudz5s/ZgN0SEV+FQIhANpyJwTt5MXhNHM+icvAbHc2a8p/kWbY799qx47O6gHG"}]},"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-ripple_0.20.0-canary.2d1b08aa.0_1602616910993_0.8226219987691727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.5bd58844.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/ripple":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lJvHm89dIuqSAlP4xth7LaitA0ZIEpo9JJDIkTsBgmAjNUSUq1p7NVtLJgUkjx+150xQ+drXIPF16Gsi9YEUoQ==","shasum":"20cf88149cea49c59ecbc993124ee7a6f550d4cd","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.5bd58844.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjw4CRA9TVsSAnZWagAAiwcQAIlgbj3vGQsaxQfjrUuX\nIPqNS5dB/nRXObuCQ0/eUzBTsXaZcYbOu2ZqGWjV5dmJtasfKqh0OrWFef+/\nMSIkxhgmx+6xogO0YvIHnyrKw0+BofwUhVBW65EtPM3fESavJhFkmmhvPknD\n7J7lIGclMvNKJni2VaSUPi0q67sv89ja6oyRUVYKt9xZAUoa91kaQMamRx0C\nikFGl1IOLGq9Ps/1P5qpK1bpinFUckER+ILBpVxkUIPG/4pN9O6TgVcp9tl7\ndrLmtVhO/LBcsuLNw5WFusoiucQS2H+zWKE2K2+b0yIDDQNnHqwMR/qai6gy\nikmnZ848oscYMY/rdgRYDLaSR0VCssDZoJpwVWwJcvjJCUd3zGUwthCT5x4M\nPWEH+3yN13qKcLZwVA9GjE9pEEbpkn1FwoF8LiWryDHNpXrPwAxUORdZjuZv\nNww+nmu/ldLqVXMZtiZEdamC2Ax9P0YkovlGI3ZajHXXjjdRIJATJtEBbKVO\nDbfe1OTT4b1vpL8TKIALSgNg4Um2FwKEErn82ALsRAFbysOIEWltH1hMYzyM\nVRGHg4aVmHsu0pRZAksvuDMx2l3N3904tN9M8DZz8eXzRw5ZjryYR1rlnNSg\nTS1r3Q9XBNyee/AOuc3ZWm1XcxPRWpdlSK3vl6aVfNxibu5hZCLupm76qmUQ\n5TxC\r\n=Di8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyh58ae7utUYrOCanmha2Zg64+QpSFVU3sy5gRxMjiNAiBpnNWCfV81YxmTvUnI6XDX8GBwD04p/1FUDq0njZ75lA=="}]},"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-ripple_0.20.0-canary.5bd58844.0_1602632760093_0.28777726665036796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.bc846b29.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-glXa6Q1bQR982zi2JndCp/pnFDqUiviZq2sdlYPbRCjk3BZEJf0rlqHrOhXYjz95lHEYfmC4Hzm6IxFdfbFsOQ==","shasum":"65123b851a8bc56cbd8b55a6fc91996df4cbe98b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.bc846b29.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BECRA9TVsSAnZWagAAkB4QAKDUefAgLhfqy5fIKFlo\nmDsdEyobAAxBlmHVjCN/14hL5k1zLWTobWphq/aEBmKHTGq0p5KWnoq+rPke\nvp7uh1JUHj1QZt9YAYsT3AKnjC40DV8XVP9HTpB/et021Tj0gW5qVYSrPkaV\n09L9b5aVpdN0vdaViDGX4yXSNUqeVMPq7N/47xsjuyKTzZrgiONh6wI9kjVE\n8I5EaPL0iDLIpw4PC/AIW67htZpppF9S9YpTq+CGn+cRbcOKCNBuNYIxd1FH\n0CTFzKxjjXaJtcqa5xOG1vz7BhAtb0LDiFYvycN5/rO2hQVRZEds/VoFErxp\ne0AH4QrTOA2NOgROS+pDmoTpxbY9DYAthTO26CnoG7zRovv+3gDsqBuQ0RCY\nVnZwNT8DZiEUCRg61RTxXOJDS4LZKZc1AZWO3ZrhpAZPqAgwkDZmln85YZaT\nZJ/lj/5vAWCZ9MohMw5s6T1GCX+HjuYeZNNf3bjo44Xz+g8NdKOITGB+e1vt\nVvo9KpVA+yMOFkoi7Ne+IP0d1FkjmS990JOzKcGuHkxn++L+/pEUYbvEoHtx\naas9a5++fn4ZlPEYLGBTHOKUCu/42n+aHxD48nmm7ur/AJRuMJPgYFqr+FV3\nEGYTQ1dLiwZqMzw2g/yYQNi3shNa5oeYIWUQ1g2j82aYEEnuCqMdwL51JUvT\nniaM\r\n=qNE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGvHEFUTS9ZPhDuxz9aCRqJ0hAZKgL1yXGKej5HkFBnQIgYBkNZSS7uqnCrVH5s2RbqvXTUDRme1cdeiuNcJXUCcE="}]},"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-ripple_0.20.0-canary.bc846b29.0_1602699331872_0.8339478685479966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.3280b686.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JD/F0l8Q8xvDHrjIdWxMSk78G9ArrbN8QdmjloUWf0uv9pmW+D23zEu3quck824AIaobBA/mUVsYVbs12ud1Pg==","shasum":"84fe175c0fcf2b5096300da1965d53641f72a07d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.3280b686.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON3CRA9TVsSAnZWagAAW7cP/2jwmsP/PMS2fBAfgXHQ\nslpN/JurlYP7AXf5twn+bwlsG3WTgFjFYAvs6KhmRiDpcLnb/Z4RI5fV10ac\n/RqLsQG3ZSCDjqFM1NrEe4uqRkD5fYW6cIB9uHgXSGoWPld4d+FJ8UmxWJ3/\ndvvanse2g/W8CiJQFJtlvGyu0/QOrL6VF7ZB7BFeXY9/71oMT6X4X52R0qXg\nzUQLxukJjBvANdjrll6AUrumKvWLy0Tw98GoqYKXzrNX0BJ3JI2rKBjYj0HP\nYLDK1JD8pMa2PbxcUJjDWTvI/cj+3ySLUjYcTmLpd1NOpGc2358LszkxNohz\nEO80u5Lgp+76EU9CHAtm1wBj/TZdKIhLqs3JCqtwwzM1FcmZokPjsGSBw6gZ\nrZ71lvdaidIgPhLoCRqWzCdiQM5qmgKL5PEx+sO1gEbbbM3QhZzMhumRPQKn\ngI1VMxz86EPJ5xqxQR1l9anKCZyZooVjjwGiO8DIF7MWdDz2cAeVkLAq55e5\n+7Zm7zGNiNpz5DcWWfqDQHxPrxPiz9kmPLRKjdY7jCoBBX8/I36a2HVe4qN6\nRtVvWpbQeuhpIS4tPgPUUZjCXldv6nlfKbDI3tSYRGcXV15V7UKjQHJ1vFPE\ndebTVZiTJ5aUJzDyy6neSBEzqoQDmMI/XyFdz34kxkPmo50rg9Qzcflwb87R\n9qUU\r\n=2EGP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICa2Uqz9cM7TWVa6YBCH/UYIYJhJ+9LD+CgKsUe9bDyrAiEAtct5cURicmpwQLMOfckdcev8lJTBTjlw3Ufrf541Ivo="}]},"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-ripple_0.20.0-canary.3280b686.0_1602806647166_0.5250960416681174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.9e94cd38.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-D09LWguFGltl0zcNNj2nDLLMLytdNeoILB8zCrUN2FsSGdCSb1J87Rjlrh9apbZS81j69cAXjypPYToDIxAShQ==","shasum":"e295955f328ac370894d50729532ad3bdf05d459","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.9e94cd38.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0hCRA9TVsSAnZWagAAZS4P/1eyUDP5aA8TWoaAUb89\nvRe6iRFAMxOS2qHHIZD9yccizxGMfozNjZjVswe5IE7mtRFuiwfQ4kub4phj\n4zzyeMOGI2qFHfrCPu3gpScAfnzbsTflEmMNOgknxjah0tMZr+HS2qU1kr3O\n8ellCnm8fSt8ScPjXfP59WpvD78rUWSp/DKTbbUk5Ba6s4UO3WV6xl5ZGILE\njwxlgyYWrVcJ5fpxW3kLv4sXkHDfbuKyhPx8Cxw8I7Aq+XyNqJY0+N2LJdQs\n8RSlt8+ZGZtUnn+f6rXwQeu3kpiyeLcuYv7nweECFhlv2N4I8NDl5tN/ISn1\n1ukduNogS5PWNNXZneQwgR3BO2gIBFwPxgjgRr4JyYeU0JGItD4CVwJObtne\n0CuvwXOi9Bgr9DGe3B1062fMfQzKR61l9vyBT7DOwzVa17xRqTWXwKcBHfp6\n6SGttGYMqbNmGaaNW4Sx97PIm9/2gqHNxBBF+oY0aj6eGhQxqKtEXS8Z6Pqz\nfvsA+f23AbbYdRrE38qPkd3/DXGhPMeq3RyWw32W8qDoITCpnUbFtJ1llDDO\nlY3NE4KEs12uiU/dMxAeL8Aq+VLppIkX2fIjg7mG60K4GJoS0eyk7YBvrvsB\nPk6HBzFrxXB5lJGb56xEvcqB1FeQHjVMgvdAa4oZA0XjEuyXS+3/7+8t4vck\nXeKB\r\n=Cpif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3tefiFhFX+PIH6Upt0sN2tAV8TqBuylLdcseIUlflUAIhAMGcff9ure1RW4iiqcQqRpABjPb4jebF46va7YWNsv+F"}]},"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-ripple_0.20.0-canary.9e94cd38.0_1602882848178_0.8737299002973318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.4773c773.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/ripple":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LqaOmDcDRvfBmd9xCYh19sQAY0jZwdp/DGU/Q7KClNomjQkaJjXmfF3u6Nnrcn9cz3LfKFY423vVqXYTwd5jYg==","shasum":"ee2e284ac10d98ac8a6bc327de2f16c86bed1aa3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.4773c773.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/UCRA9TVsSAnZWagAANuMP/jBR3UGustHoYiAqPxX+\n2Uvu779Glm7s5SvBgVNLRbIOSkC1/qaxhKti5TLLUU/sawNWTBNrsEBA68QB\nX+zCHpRGHIPlbe4PvJ+9V/QhCNmgqdcOwbOtDbAsTJg3cYnjlToBR6Pl8Rat\n75nu1zyRpqC2HM79WlYahtVmrkQtb0mBM51810AwrTAeSTqtbeTke0kHx5Z/\nJ4KkvCla4KWOxv6mRCoh3weSif+NLoHqqscNRQgRSZVdlzCAnrE53IR6bgJ2\nj5kcIok5eiU2kwaptnmAFLK5vwoPvbohDwHq5aG6w4nKDMNlZI4NmYm+xobd\nt76aCcbW7RsqM6chhg7rqMwlFSvgiyc1vfWzUcDFBnyElVVDMrNnPgDbRii6\nEQbfBC5wZjXIpQoI5cr/vy8kk7uVT1JuzBnK4xI5rfonN74J/rQ5ndxZtCJM\nxT62H9eVWV7OPd2Mp8mFdp8M1mekyZ/zlGKH98C/giqJaW12H9w+ax0+bkzY\nVsCTjbzF3ozNBSvu8q7/V8wWh6bsBegCXo15HpPAN6hfC3SPIY/hvYLBDyX2\n6WShk49aStTfghOgobv8J4wjkdazRE1xUAV0HhvjUYruySyl66z+8nUtRUq+\nwtLb4A1cCFWwC+fnd1UnbaKUFRfknbfaBaMjcZyLHG5WArBfAuCCNQ+7GK3g\n57Ur\r\n=aDOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtYT7Iy8aBpQCHkJwoaHhx/N5Tnw9mW5k2ZFu9XnishAiEAmYylmwn5Z5uPLOw9V5pTXwR0m1OZXygG+BdNkUdtNu0="}]},"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-ripple_0.20.0-canary.4773c773.0_1602887634124_0.8540529524822327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.65787913.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ocGU//lqI4LbsSySgYedZfjtw6fCpelLyoUvVnPGhUqPNFuEc7cS7UYljjqohSRzrQxu3LuK10112qEqCRwjuQ==","shasum":"b09efeacc09dd767a23f512c7ef4bf87ae5de69d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.65787913.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjd/9CRA9TVsSAnZWagAAgO8P+wUBpj2urzzPahDDq7GG\nDruTT+Hg9NxM445iP2SMY6RWe9dJWM/LEoUzfAqbEgJfVC/XnwOR7t1ER4fx\nZgVs/24TVp2CGWxXmBLARbLl4S2A+QavzG/KRqyr+WrGHTZHwUCAAdJAnu6A\nSVvaPgifj3EOyI9qLIP1BHhPZjjVrRmbeUZh10sjjnsLyrqq6ePMt24uWOaD\nNMVvtHyr3hgu170ngFto/tm/oItSIeWc0edudx0vZWXjwxL1loZ/HPCMOPuQ\nlvE2skLk8MZ5Jcw22uBoYNWI9i5Li3RLNBHGbNp0Ji027Lfi2mbmIVkabJaF\njh8k2l43IsmeDqDJDGPdLz0ktYu5NN4/mbyFCWDLlpp1tMCFtdnL/z+EPy99\nmlpMAF4bm3O6/cPmkWHIQnOWXGOsyVUGtXRCd5NlWisfBTb2acJuTZRILTqb\nGZK5YNTp9TxKdrixhX0wWPxE/8ncGxtfH/3sF8ha0uPeUQeAdT2mvPlA4jFc\nmsA9W0qHBbJj2f/c/ZCD5pZcU/9JQxS5wZsEyLmFcp0VSLRWmqzKx+PxWH+5\nYgJLkrdlOsdsxF3vM5gziTApk9dlXEHU5CAGihz70gdOdhGZhfy/jcP++uUJ\nLHTM85Sro7zoNp5zUuCPvx3ArWXoK6jLsOdrL+3K3dk1rPyM/x9HXEsy25AB\nYmPZ\r\n=3g/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwkpGyFvdMYKpDO7XRtxbMcwG4LYT/HE98n7Tk1RkcIQIhAIccIoBE2ENgGAcDEH+RhK/HuDFulRxPJ/PAK+yibyT1"}]},"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-ripple_0.20.0-canary.65787913.0_1603133437565_0.8659797637433235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.5485fba3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KcZUySMq7c6VsBUURcKaqxOJ+CXmZ9UEpr7JZ1reOQiiU68tYFX4pjRYD2PJd+m6mRjXLWsQlM+3dGKsxJWCcA==","shasum":"fe204d888093591530cec18448f23b3555cf30d4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.5485fba3.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPrCRA9TVsSAnZWagAAkhkQAJ6Hl0BzrVaRA5+9qvQ7\nVIR3eCjMmYAOIypjKkYu8fn505fKg53sgxsXhkTGcH1QZ4hk4sdHo+oBGgiK\nqGGJUe8hRVZzxBOw6LQMmQBSpUBEOHjVsFEURjBpYGUZ2vlvjNQYMWkVv1Kr\nfnKs+nkRJQinr+yWOY5aoZYFZSlbtkTsaagLFcIDrptjtcV8PC4A836ENOHq\nNu0JjZqFDTTbjOyurH/Txe/FsfVFaD7m8S8u9Ahfxptx/JqWix1OJtlMUwkI\nbsQ2xjYkKfP09YtEnpP/JvqDW3qkNN9p8haiWene5MbVT4idF8Ja/QHRDAsD\n54GrsjthqNWTAXzZiF2J2qaG73W7TT4eS7hNlhBBdHKlCgv9OusbPXMZO43K\nEyPEvLxV+tXPcsI24FU1uxK/HfZbbyfA3+3ae3ODixCiF0zYw7FAAhNOxeAf\nmbDerjxpSM8QOfHLbmYmr/5x5YBWNle4AYLPpPCHXVvIWon4jcpjcuJE+oaI\nihSWKXfpDKjtGUXKvGVpOcqNtPZus7h7v/E80pUDEneRth9SGtzJoAQcXY0H\n8o8rLXYYgSsVQ6JN/brPUgXglmMG/ZGEUmuCWdLnMUWbf0MXbVgweMtaw17o\ntGOBG/3HRsQpDjY+t3CMlZwLxj7hSRw6YvuYL0Z+0WPqRnEm8cIG6hlzDAKa\nyrEd\r\n=t0dT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/uOf2/EY1BLTaEWn1HSlSpXyZlkT7AYWnf5GV+iUv2AiEA2VdUgOqwa/glgBPOD3XlJMPhDsWj5mMSVbW9HKY+Wq8="}]},"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-ripple_0.20.0-canary.5485fba3.0_1603142634917_0.2989587983935116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.a39d0a92.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-C6BewZoHX7qnL7rM63V/IfC6uyT7wkBIXcXxQi9HrxyZn9nOC2g7ZhTGSEWd8a/vtCyVcMoqmroGWJ+V3h14OQ==","shasum":"fce4e3e040e9d82d91fa6baa9d9b4f87c313646c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.a39d0a92.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nVCRA9TVsSAnZWagAAupUP/1WnII7XX7Cl56SM4Vex\n1AnITEtMGs0jioDJ5XRvw8dyiCwGC+AmCZ6lqzT+mp2+ax1VK8v4cWkIxGv0\n5DqDLn/W4NYH4skeEIq6WkGmofykQMd02R3cuPgAIDfClbEFm5b7IdBKqD3+\no+pC1j1XHOaN86I6Re3PfB9qQvfTqnJTt6I87piKqeENgPfpghih2Xng4Riw\nncG/CkhzY2hqzdFtqC3Er4XkrdPp9ayEXyeQDs85K0mL4dHD8rRh+Blt+S2e\ntHuiMOSFdZyUYUju+3xHWiRpkWf+3aIK9tanvWsxK993piavseliirSJB+Jg\nqdLh8PmvfsI/KJBet1igKIRD454y3A4dKc7UgOjiabjoRsgU1nd1dtWNWFBq\ngPlFklhhkgdh4nEiJZ3+PcUCHr+DsCidDMsrx6bG3FtHvF3ELVqT4Ja4vR/j\n+NoPrSXAbfEpn68M+WoE7IvUJvMyN7E6DqHcHayZws2TCTmy5EvX2iO/+wod\nbWA9+iPRPXZ8yujlrKS9YCXmewcD9Smf5V+eq4JIy2BRE0AZk25aVHm93hOT\n/PT92OsMXzEosb5ChfsNEX+xYNoyAgl3GvaV6LQl79bH/zYyM1fM+qRnFhOW\nvDziSKR9Ddt0/B/sVjKlzxtN682N+Sp+nUd4rFzbxOD9viok6FlhomVx0f3p\nF2CJ\r\n=BrtA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgePOG680sgy2Ajpi12JnEufMSqq2QXxssOVUFN7XycwIgCI1RD0TyE0xjLv2MDfmtJ420lQ1qMxca3OF7Pp6cpbY="}]},"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-ripple_0.20.0-canary.a39d0a92.0_1603488213053_0.9672012712652818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/ripple":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AtkDGTtdBIZR0rE4Vqg7U0ndt0wGySjcgvER1mr3nQk3iJ/KzEfh+fv5bTojBeRnln/d/mD3QsVDCT/bX9ceeQ==","shasum":"48500b93c884f238298789444e693d40bf3e4f14","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.4eafcbc1.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XrCRA9TVsSAnZWagAAYOcQAJZ6Cjly2bn2z6gvFMd+\neC2jdAlA6tfFDjTVSNdJiA8qihEjA5ceMXrcOQOpkyTgdXJLg+NquSgohw35\nQOl1HaqVkIFyOEy1mbfVo6BDL5GDOb9G3SETUHOPVSRl3v9fbkXD/lVRqxE5\nkKoL323bG5tm9b4lF3bMlBFsdPsxiDoXUd6BknFDX7MXcACi5RdvSqQKezq1\nbub9GNtkSmMhdpgMfw8UJQeadCa1XJAcI0rvpxErOEUPFKrzgfSMJxt+Mhu4\nohdH7/4yaNRXs7/+O1uEtNedswPHolNLGjQPyLvb3l60eSiXtYaegIpQuw2T\ncssz/+wXmq4vJjgpA8H5w7FMykXtCogWQhFE0rSe6fYK/Qz6QDAYnEY0bCLC\neoBZhFYFTOFeWciTAvpdoUBH6LGGdoM+s5jKO7WsLaWvHy1FRHl8vX/f7rz4\nWmeG3KwdqSggdlnu1H1B6r/zF/NCSeyOUJQ3pelNqWhI/2glj8jiHIvPhjUG\n/1F+z54h7iVrYjfDelFH8r0GHPRAd8VR+bAAggUCW2Ehs0XIsQw1NwKncQe0\nbKTC91d0RbBp5wB20KuiiA+WtEvDgPRc3ZNnxNoCcMZXHs+HnWy7dxnb+nUT\nAaM8QoZ0CA1zFeMTvMjPn939UsQDS3QJ1eI+bbVDcAoBHKisSvM8GCDyQIAa\nqnFL\r\n=JVky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDeH5KUh7GU1f52uK6V/o6A/n0vQ7M9zsNF4+URSxDv6AiAukKgb0hwCbjOfBaEJ97xQoH8cwWb4ZZee4OKivOh3JQ=="}]},"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-ripple_0.20.0-canary.4eafcbc1.0_1603761643135_0.23277616168190085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.32961593.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CoqZKFQdi21ji+JtJElQoZ4mX9x+rReuELFztEvyfybLB4EARCI1KloJo0FlTk8iIfR9GSwn/emDixzkkzZ5gQ==","shasum":"2121e7584d04151fe62510afcf02d3a8b4bdd71d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.32961593.0.tgz","fileCount":26,"unpackedSize":90635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2SCRA9TVsSAnZWagAAdygQAKSnSWGmRRvDjuQ0CklB\n29C6xh4ZaOrN+gWROvDZm0A+rs3+F0PER2+ZNsHKWTW1w4RTsE40XB/jGRsx\nic/ee+9CQlf21R8fWdMuK8ru6hrTunkWrZ/yVUA098vyG3M3+tCwDFCxcr5X\nsztqnL/f4LbFlT9pf9XFo4kM7+IYikgkM5HuY1Y/BqrkdWVbaNCWUOrEYK2A\nNFZwJ6XWZxssnVK0qdJ7HElZ5y8qbLLL/iBp4FmPAcfmAh3ep4MzAQO4mQwB\nOW9p7qHhheS/0M1amW86/M4qZP0OgbyO6jM2Mph1SOIUPnnQ3EUxoLy5VSlj\ny6bRejZUTPLFLWkK9/YegEwtCFVzjJUan+pemcHaE7YQ8cwu+ey1cWj9qP3I\nP7HsKaED0dKbzUkPg0LHCHFdOvhhGmEgOCPylE0k0r9LR1Dv2962p/8qCoGn\nxmOz6TrbDKYq8M4fWdNWNtzmBODb3WFRLYEeFBiUKfYjQbuCiI4rBz0CFcCF\nBkE0LgaVlIlkf4EarHfvLSq4M7JUHc7R6r7NCH4pFCI3wDSP/wkRj3naKwhy\nB6mJtS8ITmnN7bYE77/qqMy1k4UBvJQcpT34kyTEYngtanc1txYRWKNZp4aS\nOA7zfH4abjsY08HZpGpjcRjU5YGwZIMlnUfnDoijfiLDamjhNHB/G7XTsp4+\n5vI2\r\n=Mr4/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWoevYI0x6UXPStgs4+x5TyCDkg2r5Cau05fM0sMz03wIhAPa7AxXXrkvYCfqQ9kDqBLNbs3o7+U2zAV06LWYrvtVe"}]},"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-ripple_0.20.0-canary.32961593.0_1603845522485_0.43029433415280605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.8e3a0601.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-tCJHpR8nMzMVXCL1OUOzx7F7lDwCK9GoaEwOFKJA0EO6tT5cKhOYHSWt+t2nUexrmNlLVsh89hShb2ykK/x+wg==","shasum":"107f66475559c366f0595a0362fa1aaa31b35849","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.8e3a0601.0.tgz","fileCount":26,"unpackedSize":90602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXnCRA9TVsSAnZWagAAXpAP/1/m/Z4gML0C7qf1hhtE\nLcf8tBwLj//J0bMlbdSw53gcT9W07CMKbPUric2j/Pu8iROBEX8WSK+D/P3X\n7iW2yM4G3+P+x2Umz0F0wCJaHn3/sUrXbvEcJobxraDaAi7zd/r9PtcePf7d\ng3JY0RhQgQhp+dR9DGw3juVLjlhYmSChL7TF84bnt2h3D+DpJ+rUNVqMGwLW\nu+9ETFaIbMiKXbuu/MfCUWbH+dI+IV8tdckT3xQsoFYiJOI+eNMz9GlpUbjO\n3Ngk/bWdw9/bTcPqSYWgb4MJOI5FuIVDnZVO0EVrLRvRHUy2TUxGrCvB0L1I\nz9ZJJtdET7kT9fVK6nPNqnrowfTFdF4VHGvVYUr4Tg+/ouUMTFoHWLtlkZrg\n/TsY14SP71H3HefV5CWVSairY9On3pKmD31/1xclezGLaI0cy+gv8xn9SzcA\ni/FH1ne68Ns/3WsP+cHnBvaeYVEOB22ZOgGOxwiZt8tXWuNKqfIpPosxHttM\nqnLlodxjkNszieDmeOKvLHO0O5yxxJVM8oDxaES3LlgBiy7jTQeW/e3PDD9o\n6HE9103lSMJSGzMY2J2Zo3v4CaqTFS2GSsX/xPht07SV5KMMYbv6yYWmVzpk\nsk8om4XJ3YpzqlRHmJREqCnf/FvpvH/jICckEYema8BeJDOro0jVJurxW81s\n2lsG\r\n=0djl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQosguYJi1n1LUZCSyfpMfFbUKt2xJ/5lF5aFnK7nUdAIgfSPXw+8RHulHgTrZ/oF+hCGjcboO26DLnI8r9bQlwXQ="}]},"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-ripple_0.20.0-canary.8e3a0601.0_1604007398688_0.28768839528241963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.178c25b4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-egynp6pB14qrze0YwS3Mvd5+DagVfj25ZI/l1N6nNjg3r5tJ6o8Kvu+xTnnhYgogozNorBeKK0EC9nghWDv/mw==","shasum":"e2c96493309fb62e102105e28a9770b5518fd5d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.178c25b4.0.tgz","fileCount":26,"unpackedSize":90602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkSCRA9TVsSAnZWagAAJ80P/1gO5CGa11X55mi6+gpi\nwWt/Hn9EZm3lL5oHZFCdd2LUfrgIsyA9NHzryEgYiJ0jmCV7iC7oZSQBwjE+\n9qH4qPLV0FKKOarcaWTEw2l2o+eViaRY8EmbMAncOiLt5beo5AB6ouR0tP3f\nNQp4YYD7sl35r2Zz3l/0kAkRcvrihIysFuvs2XogvO6UeyNd0XzvAFAc+ZjF\n195+vLaaDuscMTZX8qeaSp+BX0mD9gXv/q7S2T6IpePAQc0mFBcI5TjaJ39s\nnHbGykd5y1YFXjFaL/tn/FmhM6IY7FQloriVh+zy0N/j5+Ye3B0Q1gpBdB12\n06hVywPploZWFRGaGhDp3iqiceeBdXNL3gFu9iv4FikvEcQMilbv/ZGVgSjd\nn4MyI1tPRUyl5EF7FZbUmKxhtmhR1vyskvHzZ3f6KS1BorPl7KxL1Shiyg55\nf7y6wBI00ceN/qKLmOS21Q+HmntLv8ldxOhCC82t4X554c8Vm8OXkqE6YZPS\nTIw9NeM/nmQqIBe70ZUTWVC8XtxMImf5YVmwIMuJ6C+HWTiR5C5HCNYU9V41\neARG3BtomY/TZEqiv/kMAHAJhYJ5ojPGNyYXkRtC0EspigggvCMlerypUdWr\nt90GdLwGEUNZt4+PUzxePNwZGDS6vAOKecM9KnV55sdAnrLj6jFKiUUS3u9p\ngkcY\r\n=QltJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFMsXyMLTprl7DkQFvCW1eJBPLVjFZtref6MTgyBCY9gIhAMu5GS50np/FMtwNqHhCDITuWi/NEKWRPZEcXCKJtoue"}]},"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-ripple_0.20.0-canary.178c25b4.0_1604008210281_0.7921486741525794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.124beb49.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-m/y26ueDjaTzMfTy7XoM4/V/w2JNycsVDKmlxnbME4qEhIRf7f6BOLCf6U4SlTqvJu8G2VOSw3x7EbxCjKapJg==","shasum":"e4c830930d2531cd61ac6318ae0dec6b3ea24010","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.124beb49.0.tgz","fileCount":26,"unpackedSize":90602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKp4CRA9TVsSAnZWagAA8ZMP+QE0kZ+RicOuGRsbwNEb\nH1Nf9PF/I+1ZKy57ME7OKrAh/e/fETNfMXwV44WFHWiyEIEO1mVVB5CUHDsl\nOGtZcbc5RGFtBxD1Qnul1K51PXwFD4T3XuQVvpFeh+Fn5Z84lEfgk/DH8+xA\n/4p9BImlgBkANKWoGCFz1Fx6YdmHOdOUmtfna1pnZGWqy+3myc4iV97TzUha\npVi+1EL1bib4SBoU3ys3xH0KOmOh7u92XZcqt8gFnjvMzicET6mk72wCEvyz\n6xAZ+qgARegSMtK3SXN90JCRRyb6K6zX3tBsue8zutIEMFZg/CZ0BSXr4p1d\nqg8xrAA6MCXVtEZAFtHOM2CvNk+oiOZaZRLL7DVHTf+jXDTNfr5fA6w5M+Ph\nW59Gbg/91VLW0DlJEVYsM65TyVFcGR4sVFL7vCfKyYKSDdCTRlTuCYAO6g9q\nRyK1J6/WbVdvja8dDwX/H6xvPy+05zczSPfqlRAZh1vnDsDt6oN+ULIdfBXh\nLGQYpWuECEjNrYdJeyaEGz5+k2fIX7E9QfDa+64+D64g0vXja0WrZodA0lji\nJMjGnvGyL4hbpl/7F2MW99fXQsR9aYx7qtRaWJcmR46slLiqWEgz4EJS6/0o\nQiG2+FZ+Z7kqplj7O8GC4RkHwGruE/yShJV4NZqHV8GlubFJJwGwxipqBqr5\nXgF9\r\n=9ROx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrCF4F1CIYehnuZEFdEQMnHgYYh5XOuhYxleRyzjAKnQIhAPR3D1GRv/BfNHzfIQ0IjkaOYLN/mzAYp+vlvSnJJ4NL"}]},"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-ripple_0.20.0-canary.124beb49.0_1604102776342_0.034256876882704956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.5937f468.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-FKpMPNfsM5VdVX5YtFwOLHFfL/lRz8H1lxTfQ3kSH03iZM3qyRTuAVDXmbMT/IQMtv6XHQ0qGHPQBMFiDqHdvA==","shasum":"f8b3bd4b5c9ca07514b93f40d08c78fb0c3acca5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.5937f468.0.tgz","fileCount":26,"unpackedSize":90602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeICRA9TVsSAnZWagAAo8wP/39DEtUHwbZ4DQOvYh92\nT1jtQz9xLlXMDgpwwtqoTf+kuyv7H0bJ6B01lyhb4TNKVYAdtvgkjEEGzxDv\nAavrMJj6J1K+kHYG1CD9sQL5ogO1c3ygxDyKgJSSfOQWP6Q2M55fXmFm3+qj\nwVn2itzN2Ec/K64kfMYQKCv0VZjbh2EL93LHpS34CdSjUtMsuA2RNs3Xs7/H\niQpKv7DEPshAzkdHw4t6z1rJmjG0FxU1DTGzwfjBb89XzvX0BONSmIhrWrOS\neh4qqrlzHQOwyd5QrEDunrH+SgXJ9NSim6cW/V9MvwlKz8v/4aGPsd/xZPNt\n0XtVw6B4dN0bM3GSAq+Xn7b74xKhjKdEEWg+zc4e4aAZS6mxc16lG3yH5EuH\nX35nz6UNgI9ctRhnNS6MhzCjwFCQiY8vlxoJtrEactFIs5BWqN17/necWa6R\nDjTQWEXbAvDjMAqTLGbXN964OgDLMbVSS36JdCuuC+cLWZ/QF7ccgikrMJjr\nUwZHNMA43uJMbN4r5ErluNbA8b9v3J3rwYYMPM+owpD20vlYV6uTqG8+xEcP\niS+/aKuyf8QgUCivVDErS/xDm76RqejVqB9Kedyr7GPwv8cDKJpXlum4e85n\nW99mXPv4W29pMaO6dhnr8t7Rrx0TQDbjPlj84pYk9uSHwl4jSYPO8olHMgU4\n1nme\r\n=hFwE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUcZr4y6LRTWpcwPfh2s+Xa96zy7nkt9Znf+hxImmPEAIhAJW7JW4/QnpC06QMT7Uo8h0NDo8kA/thrfFPebibEoWu"}]},"_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-ripple_0.20.0-canary.5937f468.0_1604523912007_0.018861703889424097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.a9bafaee.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-ripple-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n| `--mdc-ripple-press-opacity` | `0.12` | Opacity of the ripple when pressed.\n| `--mdc-ripple-hover-opacity` | `0.04` | Opacity of the ripple when hovered.\n| `--mdc-ripple-focus-opacity` | `0.12` | Opacity of the ripple when focused.\n| `--mdc-ripple-selected-opacity` | `0.08` | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--mdc-ripple-activated-opacity` | `0.12` | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n| `--m-ripple-z-index` | `0` | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IcJ1NRIBuQf5acaoEaoeNv3M4txBNOd1lHw7+/Kss4oD+OQdR8GVEya0bGKwlbVVVv7uBHjWSoj1RncvMe3zbQ==","shasum":"8cb704cc62f4a67ea992370c4471b9fc8ebbcf88","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.a9bafaee.0.tgz","fileCount":26,"unpackedSize":90602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0HCRA9TVsSAnZWagAAvQIP/icIA3O3TTi5lPvJZxkV\ngEOTm4Cxx+TqxvMdtRWrOaCRupLH8MY/O0BfrdjKcbYNBSILFwVsg88i4gDy\nH3GdauPz9if+ZM2UHFkiVFr+34yos9OOl370m85hq/nH6xApyN8YFtC1l53M\nY3iiKmhy1czo0FxC8wTImCwXBef7pWkFCTGHFER6F0ItzOQIGDfARUdAIZtB\nMCpiNR08USIVB6jpIY7ZAiIltOkCvF1SW829B7Hrt6dtvb81fKmYKSYPg3nE\nPhk1MQZO44iBZPvRB89bEXvGJd0LduT7J1R3eS+/xA+nqVMq9jfC8xnJMYrs\ngR+eCwlWJLqQ3Ec54V08loh0zOAOZ4hOIjL2FCe4bKwp3GdPvJXa7yZcARkD\nXV8mGzeRMfq6jXADHxrC+wLvrSjCKJK/8sRSozO+EipJemfyJnzdddDNobW7\nJswsrWizsNxzmsthehxdB1biTkSi/IEsEEZFcQRpMWW+vCmqBXameKZDPsAW\nvBYJdVB4A73p77W3w3KTBByQW4uTqlTWMx2dTFFt0NXFF82JhADkc54qX3mx\nn1icABXgdtzd6ep0tfAmrLw1nkcijbDg1HXqGqTY5mvixv1nDzBSV0If5z4x\nD08NgZNSaVvpyqKuD2m6qeHLF/SgMTOVWjkiiU6djn13Bqtj3hKQST5eD1P9\niOZs\r\n=JaH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIw26cyyyMAZB/plWHiLL0rN/z2Sq7UxSatPuZrQjsWAiBluDcu/o4fYZiG8ViyfrXhrpTbBzKaD0GvRhScA8lZyQ=="}]},"_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-ripple_0.20.0-canary.a9bafaee.0_1604615431373_0.5521113495680152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.184861ee.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-65KE/4qaHYGNSdMFtQFtznaGQtR4dTQgbhkBaHswz0D0vmNHPe3W7HaluZz8Tr5mGD4+yfgYII3RBXxrytRzhA==","shasum":"08261e5b93e026ca37065121fd4e802939231d5e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.184861ee.0.tgz","fileCount":26,"unpackedSize":100766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexGCRA9TVsSAnZWagAAqaAQAJJYXw9i+1XlwUbDtxG6\nqarbv8gX2M6DtF3OQN6aMlgL1CjHWXCLeXM17ea2gunD9tGZFZiX8XJEsIEr\numWN0tFfw2zOCeCI92ytvBwbQhXcpL92Hpdg2bU+qqK+fY/M4GLgCDVxpuWI\nSxwKZm5o/v5q0SLF0Lf8gXvlHr30lT0Gi8MsNw67dgYTTweJDzBZ014kRfxa\nO6bs+Q+0WEWlTHLvwSR1LQsthAlpaMC6E1vrocHvvJ/++Mt27rkI18jeyU7X\nM9RcJl8o8UVM1CWKIKqzIGJ0gMIWutWtswwzDu/LCOjbzU9IPymy5DzXFjFh\nOJDOwlVc9UoPCoKqRn1XugfNOXg/kRIIHvSFKTOtTF6TZUvLObFn9PyXPXr2\nYVwfXMz0qUGyuyPcnO3H8gtMYeDkZDKTvAYCvPs8vNZLhOd+hv9vtxb9nQeB\nrNnVWk7Aytyn7Ji73npwZJrZ6TmBYC/ubn8MQ5HuN5KHuk6DVnNqetLjOPCU\nCb4mtOxct5VGLgqdtNv5SHkLxY2kHwyoFAfXrsV5rMTara8GXgl1InvIHqKb\nBeQiF6E5uF/vZXzsfFO3xiwXjkHRE6FN8R/SukdyuDSHxJS5iYMUO4BdTvJ6\nxXSpVI1sdmDmAmA+ANUAG6KZi8WLLaw8Ls+0xMpIN5h2+63DVuCyM67M/OW5\nu5Zs\r\n=mw5M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJnt4Otb94sNrh2ligFDCUOG4dEdIHg2NK5wVmExp+AAiA7F5T+UWJtFL1s6NNyCDw0p8+aw4IHh7SS3HGXeZQfPg=="}]},"_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-ripple_0.20.0-canary.184861ee.0_1604709445675_0.1979048636660823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MHW+rQAVZNSSAmdO4VUi82U48LWnEJAJJo4OGLoMsLl2QdOvrana94r/kZ2dpjmRLTZJ1aBsaU+/qHNHQzItng==","shasum":"2aa5d89f986445ea7c0801477bb2775251bddc4a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":26,"unpackedSize":100766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6bCRA9TVsSAnZWagAADo8P/1KyeJZN7Bg++NZYWdyV\nt0pLTay5IL036dCvbvsu8VzRRx7GBRRZt523pKjQa7JKyWPVCVkb4ZJ48dgn\nPCEQDGXrTzStx1DxyuPoOru5j/0U6wROMm0a4r7kfX+k6ELkEIeDnb7ci2nM\nGcXPIqF93ZpM3Pw2GwhuUJHMV9o5t32GuAm09W6VbLkhwzcY8Rp/+LdGXjnS\nxgHF3G6WS+nadOxNgwGnqXGg19w9QuZnq0Ja6e5fSx6n0Xi95SkKsJLHZy2N\nqXfysAOd22WAyrJloTmQf7E/ZvVcSBIKkMQ7i2hIp7M9dWOTdhoYEevZaDc5\n0tnwwb89SFQdYaYmmYmYC/tJjAmYnGnnXg557Dl6dvqeA+LnPWXHG7RoNC5i\nQ0tY2wm18z2pymllGAfjufaQFixajBP9HzADNEMqlJ9vQwc23EusdReKGf1k\n4uVlsCtI2syHofCwQFLEF2tG1UZF+frDIgs0IzmPYuSZseqZXFlYDpXlVy9Z\nN6IrEvShVj1TRgUt2Th233irl86PxRODWPKrpnYFCjlN5TiUVaYgMVsS/C+n\nohcLEQRcZKsnDo43ZMzKi44KzDWR2hduy1ML4uJ6joBGUwbQCI9bTJXpig+Y\nBAr9EwfkxgaZMWa0YxXMdMPpV/EkdqrkwRNlE49xuFoEBlQnRgd6vD1Yo87R\nnGpJ\r\n=839h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqTc0gOq9cok7zV0DzuRbf4onIWjYMxAHCqSmnaZkGUAIgFvdDN0Zj2HQTDisW/8NbyJ7jSUswpaS0Ag3jcuYbyzQ="}]},"_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-ripple_0.20.0-canary.6c6ae2d6.0_1604927131092_0.8586898442453608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.ea2aa477.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AQB+PfmSmJseKW5VDEqZm11c9N5//nc0wrOCM69VPU2xiSPibfcTqlKLz4OUlRH3k2iDxFFWO6VqnfBVfQoQbA==","shasum":"f5adb82c60554ac1750f6848d63d76c43b5dd367","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.ea2aa477.0.tgz","fileCount":26,"unpackedSize":100766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqddpCRA9TVsSAnZWagAArKsQAIFeC8NdfFfMDHFkw4Az\nnAJqXZ2RQESS46TvSDr7fYp4oPSnB7LK29VgVQ6JXGTqCa5DaV/g/7uBabz7\nOS5GoxffeFHHerMf6fUu38Tq3XgwenLT504ywkqx1VKHdbx0xv7E9chvMJC+\nv23y5/GVaIHQJVcF0yRDYrRHRKSBDjTGoKAFUfldt2VP8PzrOEU+kbIo/BmH\noLs74KTtE26HMJSc8aNPW2aduWwWqRTvdKbH9x4uB/7QoPIXPoGFrgBSIaeA\noJ3Q6HJylYaGAI+bn8ceDuw7RptamPlS/SZosq/0APJB3X0yG1C3Rudt/7BB\n8mckNQ/+QFQmO2AeBj3FcPawReF6gBfkf/wmHlOzHRcbXNsckLDSReG0kZJE\ni3J4yXw8CCcxS+B5B8UaFVBpMIAqPffMXNWVnUdKOFs6ZDZRFLEmSvCioztj\n7basGdb8M0F8wXX5Yr9iOjlej+VHrEK9QB7CJz/fMPvqYfcQCSKz8c6ChpUt\nUCk1IKaVLcTza4+Ym0cU1U40wM/w1CTEO5kDYw+A08wDqjbNvrZvfouC8Ud5\n+mttFD7HCWXEwLdCispTWuRdjtsv2NYCVANr5SA6SgdsKJSF/N7MCs8gd4Ry\nOEcGO8FbeG9f1TJERej5OqlNZ23Pxp1h1dsJHCpClBTKV+z5Sn2F+2flir18\nihi3\r\n=/tn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPV99mYP+M3Cl49vgghr/p5LFNxIFnKR7rO/SSRMg24AiAh0Upmw/NBT3tIRbgPkwPEG34vbnguMfljFmSufCDDmg=="}]},"_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-ripple_0.20.0-canary.ea2aa477.0_1604966249093_0.6030048159697536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.a2c088dc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7LDY+0D9V7c/9XwQ8YxTuMcbKBrq6pLlyeOMdfH+Ftro9EZaya9MTZOSXTeAja3HL41ssv77DSSD9HjAy59f2A==","shasum":"ed928f591f3ad6e03c1592905cf5ecc51df631b2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.a2c088dc.0.tgz","fileCount":26,"unpackedSize":100766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJyCRA9TVsSAnZWagAA0UoP/1Ifw8s1V1mKaLRiu7rc\na6poWcpFr3grrJyzCmpFv9gBRBu+d1QSSZm6jrGd7KAPI3f+UPzhlafj8W0H\nhB2xPEEB9nQ8cmThTe9aqPtQrF3e0cS6Po5P9zxMpPKPjcNIthsHFDvwsm3x\n+uPC50ydlzvGx9m784yCx/JPf1zr7++eu71xzTrVhmwD6JzJ0YtVzdiecVsC\nwFz5P32h2CJ1dn6B6XEcIvzDYWesemkvqlvoo0F7HDsZZNuCwE2ehLlXp5ow\nd2vsT4ITvsToLxs6GWrPEkSOeh3ViDnR9WgjgJz8rCZEOhCb0X8LbgVyQFKa\nzKdb/BKMOQLgPlmhpmW2TpUDqnjqzysh8LPYefHeEc+n9NHoBgzXcURNBVH7\nenj8mNvKY69rd35tIU7nBehT8mUb4zsfUIPcJUUal/PWUXZkYbI1JeFiDW+Q\nmmZFfUNZI5LI85jCaP7DdIj+StJ7r3xSm8t2ODNI0AjoQ1K5zqnKhv8MYCPf\nzwb48qKNEfjswMkRBLBXgbwVF23zYE1qd7wPQ/slxZhkZA3qv6zR9tas7k8i\nyQSsSFW1ZRa/1NPIX/9T1y7AwpfyglyDg9zE2FGUiCpXG9B21ynSDryEgxNP\n5l+28ZN33R8z8e6VoWv9vt5ANchDWmQ8YD0RpdofoeXEZak8ocaKyQyhibpC\nLXYb\r\n=/kXM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXnd9loX5F1wFZbrULpBLeL1Moft30fDBvkDPCkm8PDgIhAMxPQS9MoBjtR9522biiucA0osyxrbq5VJtNac3U6gRz"}]},"_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-ripple_0.20.0-canary.a2c088dc.0_1605018226219_0.39508154253354943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.b04d71d4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vFjaSFK/klI7O39mTxlny17PxfWbrSIcIxidu5mVrmrExIqKpkCw6znVWiHo4M0Uj1Q8GCRfuWGq5Fi6CnRYmg==","shasum":"b4520b479db5f3f7de41b69e4ef77441c3ea73dd","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.b04d71d4.0.tgz","fileCount":26,"unpackedSize":100766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFoCRA9TVsSAnZWagAAsDcP/isH4JRrbkCuryvBbO86\nHFOKr2TTH7MAEC0PZKfoDxgCqNn/0TKl/Euax0JxIa0dfTlXrjepdxDVRaje\njX4+gRP6TqlvIKFRK1Cr9oxDCQWZoe0+nZHAir25KodyEK/LF0p+YOOWVE1N\nzcR4C2rarxRMAqddBCpF6f2fa6JFzgt0fUX2CGe0J7UxVoAnNR9qKxNh9sxL\nZcSNY/0K9fGQ3hyEOGUEWn9BJxYXe7fyW/LIMukIX1i8aGJh8K0Td5pFaS9j\n5NOP/k26DXv8r+elggap2yVOsbvf3TI2VjDS2Vv0QjClWVcgOvgmk2nN7yGd\n87Bvi9ZAo9pOz9DIDShUjDHw20PehfbPtNrHIF6ofRRiIJHspSWR1gglYkuX\nLhzAbmuFzPenKRt656nKYBUNIBfURPqia74ijyicSROiCDMsHh5EYmAAkx2q\nor6nCXbmYr6lWmlRtb7+EMvw2vfsd+s2FZ0HZ4kWuUDtPFG+5sppgOQt5pWm\nT7BD3ClP3GTQgQLifNevUuk6xk/RKx1bqhahc7MY11SJHmNNSW/kv55RSZqq\n2u6p4Xojil45bKS/THQTf8S4E3ypc1gdfeEtXU0p/OYUxhBDKmebTYPO4O85\n4Y80p5m0qWiRaekFSQ1SOZs+PhJYkwa0jZwfcsRyfyO12WOmtQL4dDIiVue/\n6Y11\r\n=K3xu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9T65poyBfOc/m0IV2ktVn8/VE2jc67A98OVgvdcIsRgIhALXakRhvYstybcyaIWGz7K02V5nTpCKh/8zm/2faBg51"}]},"_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-ripple_0.20.0-canary.b04d71d4.0_1605177704423_0.14372294037761746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.2c553352.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/ripple":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DN938DUXWK7o2YgRQQhYR8wGmGS1ljHb8i20U0fSmVqxfKrmWJV34j9nDMTjM3/hHtohTf9jTEwT0SXCYjgNYw==","shasum":"aae00e081e02e5ac5b1cf044443b7c3e9a9f7c4c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.2c553352.0.tgz","fileCount":26,"unpackedSize":100765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpQCRA9TVsSAnZWagAAWRMP/26YRFttkLqbRB89Dkzh\ncFcCsA1dPKKDytvjr2/XRoHYPqZzmZLbwVneraWGHz2+5yR8jSJ/1K3j42qf\nSqBT32DTFW0vrkdvzGbh7OooQXncfPIN+95jEOOvifUKayT94sgC1P6cZ6oo\njoLJ5fvSRZjmxMCNPpryx2IooRfHQ4EOglxQ3LFBp4UBi/sd6nBi6iOW3X7a\nfQr/b54qBDE6nHsy+eCuEtH/ANt4tMWlm6XQV4+e5ZitHqeXfYqMfbMrW6JX\nAf7bZJxDI6at1Sh46daGjIc9VuGCRP/CZTY/PnnrjFrK+G7kK3GZlFnGaIJ+\ng7HRTxaFKyYVuIg73iRsr8DG4Ce/gGOOayhQl3qH4qpUI/pfB8I5IP4GN7+C\napnn1Qs5C6jIEv/lpRDWtOYhgJC2dKcVRS9BQWaFZgEoL7wvHdZcgqFIrIHa\npQgU+vIFnPziBDF2/wCZrrfR2wK4zMPDqrMKwzOBlvHfwJlaC23f55S7fCG5\nilfUcOotVpxVAQyHguP1emS5z+UTVk7EomT9tOB4+3fJh9RdAoSe20RwWKR9\n+JwsJ2opgEn0CsfQ8BDW8zYBeptV4sJlwaGwb3B/IHkoh7aLOvD0dyDIY3Uz\ngGGEBifN48HwQYiIf50KJeol/iwefNejq2OqvVWSOoUdgCRHYTOLi1X7REJx\nvtxT\r\n=/o2e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeSCQOTv+U1neS49UEhDkmEpBJOelo9RFmx0jMViRbiQIgcTmY3ksM2MevhvxbYOcj89vC73vP5ic/t88PnXDCXrE="}]},"_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-ripple_0.20.0-canary.2c553352.0_1605220944419_0.6974687012614487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.6560d19a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sKYVf2ipBVQo8/mUp0jUkUcPAa0RuZroY8NytHzU4u8oKf6k22/Tk8dcztYz9NSJLTR5dzLYmhLPaYAyYTq/GA==","shasum":"627838c3913810a0383aa73ac38c12b5fd5b65d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.6560d19a.0.tgz","fileCount":26,"unpackedSize":100765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEJCRA9TVsSAnZWagAAyxkQAJJhtS57XhpwFWWTLEGq\nCZuO0ouAPotETBafzrH8qG//Opekfzx9mj2ohMcH4tw+mPWZii+fLDbsNLeY\nKKAV4wjg8y+o/1X+K63Gp4wAVUjx7Qd9r1nhMljxqERlDGjB4UaIPMnWmH72\n5QMGYDDVnj+eyq4nkGceJ8zVTMEKf3kJ5SGKgk0ttoJsDOw9sRmdMMUiO4Wq\nURUgeWAt2bxixm2soYRJUNW58ahfV/jLNdcnmNEidlPsdNNyWDjUtr03+qbf\nufAngTTYJiXPbeAMiXkQ/I/yvgKkyjXNmXTnGwutuBspmQy+JsUDBzis9REE\nu+qgifkzGaoAJbwcOPVY127cWbqsK19t8dnOqDlDZcZZRUjk9Q2C9WH4r9PT\ncB32iM3Mq/kbIruuQ6+vP7YX8dHCV0oNHW8fHnEuk4owA/GO0aZgt1Pd/qRn\ntVi1QuC0JYR/FE9qPoAJeJX1YUn9f3EhzOFY8ifWceySKnDepxkezVvY4daz\ns6rPcVXu0jUEBfBYS1fz8V000wXhTYy1QkmX48NCg+5y1TYKiWgHZzGLauEC\neJ32Gd/6s/TaDedPTzqK4AV+kvA+1s2GHtJ/18LJCy7exTD+5wySiuN/66pP\nbCjSBihYMV+7zbKHue70mpwd5ISkWF7hjCmtidZqjmUL9+l7fX/PGN3/olog\nY3Of\r\n=hfqm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAzOEbd+fN/d/QXR967qPxhse89nWvvmSTAJj+1Gm+CHAiAVvxGfo2h7XXBW9NSQ6wSsyIatJkS0e+ycK0yHKctSfw=="}]},"_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-ripple_0.20.0-canary.6560d19a.0_1605300489029_0.8839913372573265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n0ovlalLvlPPu5q+1+zSsGIuuBSUKSE2JdKEzy7Z5yFLS5q2zHk1JmQHpcuubFZB11lFdbT8u1WsTpLlicSpJg==","shasum":"0af5536b7c5002b70e365e5a81dfd2ae4528c0d1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.a28d5ec3.0.tgz","fileCount":26,"unpackedSize":101209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+r4CRA9TVsSAnZWagAAznEP/2oQ0KNbaHK74DtjmHem\nezXaLojmM+Mw8yJ9SbiktFP6esAFCp1Fqt1sLxIlFtx7g9LrdKMUa91GxaB4\nnLK9GL6Fag9xMXD2hBAw0QgmwcmWf5UG88vI1fSOlp02s6TFBxZ9R4yh7G87\nbYt8f6GZKtDaJALpashDmB3GoEUWk83bByNJvT1ISmnmErwSthLYqNobDMP7\ni6ex16KUtKZMiAIlBZHONhtk5Q9SLUESInUrxzHKKblS4rJMv9I3BCPTcPsf\nfS1IkN+1leBx4lM8dhcXHFMnTbpzPlbYFkjh6028+g16DTgiJfgbVniXH1FA\nKyUS1fIZek4jzs3Vdl/4vA8TvQ2tkepP1hLnvyCw25J2/T1EwYVImrAksice\ntHUVKjlEj4WBY9UQ7c1aWaViCn/fExUM4f9UpetZwLaoYRzzIyJoq8oWGJQQ\niaJwpmyzDYBOLk2+Fb2YeTEEq/mXLQ0cnLSNB/W+spFPwuv4Bn6y2DZbzazR\ncXBbiYiQUf7V9wgedm+rpfYQh8Or8mb/PBdxkMmwrOImLumUvyLOWcG+RlEV\nwdz7VHjunl3JTK0cdLR9V4vZszIjNYCe5ahodzdxYRAbTB5I9cU/L0aeT48d\nr5OfwpAoMbPUa7me/Gnv8m63RTRFVxIUT6DdWaS4cK0Tjk0ky8vkfo2u9QCl\nSzmI\r\n=/nY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfaJbVGVsn5KS6/P9ot+C50CmWQtqk/SJQ8N7U6yngpAiBNG3Vr/OfWl8QsnOoaMvJNFRbFP96gUkThqweRxRbHbg=="}]},"_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-ripple_0.20.0-canary.a28d5ec3.0_1605626616476_0.1243333428864124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.03e7e778.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JCGARRxtneSIqSaCRP7qKryyUzOs09SKG6vMlQLQ9l2pbf2Bb2ZRNoeHEcfPcToOECtGt6nKQ7nTieL9MU+iHA==","shasum":"f1cac575642c6c3becfac93eb072bbd1943120f0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.03e7e778.0.tgz","fileCount":26,"unpackedSize":101209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCOgCRA9TVsSAnZWagAAKTYP+wQWdfkmurhlSjS4sk0z\nwInmhauSdZoD4gndbaIgHLNLLQ3ujS2BIZnICZOOUpkQFVPjx51ewV62sW5/\nP/MQ7nzF2R0fSGiOd6fxUBcWGWfKIblZU1BK4QPzlrExDyyQOIJF/9dSFr7X\nfPf/bh72i7IkWzvaK0p/mavwOX5nUVlq1PKFYzqS8XmMj3tNiV+y7lsHgmHC\nbaPQ8Hch8F1iy+iepfsU5Gz6KR4kzdvaltKgpILamCEXneIfs8v95GB98ykU\np225KYA9yzYB7EdDJptx0P1QZyqNkOc+0B56gv01BK137GF0WpHHQgNKX/7b\nOHTCp+gcRt1LWn3jpyv8LnevyNGHLFwUHIMl0CW7+npSGYtZRk1XzFwB70SY\nI0liUMKnnRyOlS8cHzW85wJ297OpcgtCjsFFDrcXfbjK9omyel1ukrIwC2/P\n+LcWVFy35oVdQQ4P6kf74SMKkIJ9i61PWBmQEmgkJBO+of7u8SupFRcPtOyY\ntP2571vb8a3kT8TsUKyP7l9ZGj/CLCWjzkZGQOuXQYx8SA4bzCJoyaIqmMgi\nCGofHVhOu0jGd1IhR14wgXt1q6KcR221NDOSuXvG4g8UhH+ma3kPj2rPypn7\nr6cO7M5VnX0/Sx/vypeNZ0mzXamBr+jaa78mbjEANUdi5PmWu1dJsd6d6EIu\nFmj5\r\n=Qlyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGP/Ww6Pa/lldOkcsxMjZeKSF/hmFpPWLe7Z8pZIM+kAiA9tCPv8sNwbQTiRDR7bVkmNBN8gYmArDw0uSEvzXDK0Q=="}]},"_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-ripple_0.20.0-canary.03e7e778.0_1605641112153_0.4785807101851005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.ac8ed597.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/ripple":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6Hqtn/nb94AAoo0eV8G+LhNU/mb6tp7HUgb1Kvj29L3jnakYin35q2aq5AP8ulWXii+sVtg3vq7/eUC21zUIWg==","shasum":"df79bbd8c088f7d69710e5f6428c5b0f6ec21dde","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.ac8ed597.0.tgz","fileCount":26,"unpackedSize":101209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqOCRA9TVsSAnZWagAA/sIQAI2gRLYZ+HAQTAag/nbi\nUrvDzoGwoBpS/FIYNUSLkv58CnyfWy3IX0yx7hK1W8SQ2Xiek8UOOq+YQzFK\nIdx5/G0F7XGLWb+vd4cwlwsy+WBCTScy+JXL6RvLaTl25QENaR5qcmug4PfR\nqg9NmwZrtEQuWNjWFaHG4dWHdE+I4J+h+88t2a8vkz+91OGpC4azJzOIOuui\nejgB8zY9WQeeLD6yWB2XyabetNl50mWLowycin6OKsZXKcxQN4jU21h/NWjI\nGW6LbSCRswuHdx4sYX/NjnP7clm52HDGYZ6kDPLb/wAKNbqD7hSfIvyk3OUi\nSbSMEIHX6kpABDo61ZnisY8q7rWHVUJMqPZm4NSEitReoT4xoODy/5npfrR9\nALIro9hAxW3fP8fsm9aXQFIXQGhgYIfpD/sXaIKAwsF21bfqJ+eQbmpcbMfH\nTRssLGHJaULERZ1Pbb/keT3hb0/SCGjrk9gygknEEBIhQDO1M5Q9d0a6XwRJ\niUjO1EnL/SJuFfSC5PljBH7FBNPn5XAPUoFgWk49XWhkbY5VwZGlCDQ3Jadl\n+wu4p0dUvaGwTzG5woBugc51gJWoMeqmmUldNyTlnYZWA79JQ/s+D85tT3BN\nMeX43XQR2A7sQY1w0EWsIV5SZefsMEGWqnMq4krZ8m2gIhyTA3XMZsAB05ic\nnlZ4\r\n=z2kc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzhGUDNUShI2qhkvr5UFxcRt6NKOe+EZX0AGplU2BN2AiEAmuAvyRzSLjd7K7/Tzwftow8hnzs49uttyL64noav+1Y="}]},"_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-ripple_0.20.0-canary.ac8ed597.0_1605651085674_0.18947787751073375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.b6a60f60.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/ripple":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Y1z66talJ5mcqdUm4xnpqsa+G7UFtndAt45gSrWSd9fapYmvZeAqnKSDuBhta5iZ/B6bq1Ju93+pzf97KwwDfw==","shasum":"558d96c238d4895c74c46fa58d210b2054fe373e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.b6a60f60.0.tgz","fileCount":26,"unpackedSize":101209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQFCRA9TVsSAnZWagAAacQP/0V27e2wYxwtVLdf82fp\nn0ler907RdjLuoEJAczu3iljL6TWW6QiIhPE+9AJ2Z1kldimBacyp8QK73uN\nirQ1NINtIKK5U4c4OkTdUsGQ6RkNo27Oar8Es7r8skXw7cxW3bzftkjXhLsa\nz/Wnwxf+Di/2JJ++cOj9g1r48V+3Tam0RRLKOVotuzcI9JYBr/q9eHgfAB9c\nlelE93ZThe5evhoOmMryTlgdK640Ok1OkN7bvrlt/wk9VPcY7qqc20l1y2AA\nCMzb5BlxEA0GYKYVflngEOlIgFJlea2su6x5KtAS4ne+h01ZywISTYazs2q+\nsa4rszLEWa1j4dXxMtVSDtufXcBtF6tomSpLOGcB2X/buih5DG5RaDrYW5Q2\np3yQg8rfmmxOMxA8DP9spCc6UgYB4aHc7gyPG/YxipW5PswLc4YaZmBVNa5M\nVj6seP4DhOmTKZ0H4E+vWdileuGUC4udSgozxp4MVhBoFizobIH3Bj5MdWrm\nNvYSfaMfSk8cJ9xweKqdswt7m+xNPPybDZojqz3pmqvXHNlpMOuDCegW3DAR\n06Jei3ASlCu6HNYhlL9Ncgvv7ihoE0p7vsxI7y0BOblUpsZyt7ld6O937zS+\nSeEKiR/B6wFMw04GI/CypWmaWqtl99WILYZEQCkAh0XNPjT7e6LrFMiqR84B\ncHuU\r\n=lPRL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFz7z97OllTMbPKSez7u7I72Wn5LKQP3wnyrznin9a5/AiEA3UV0wqJKDLtpGYwWg7apLKSpkpTYhS6T8jNAkwUhvBo="}]},"_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-ripple_0.20.0-canary.b6a60f60.0_1605653508665_0.9301287999333849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.71cc24fb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/ripple":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-go2xVn5sg2ffp3/2BY8tqHIxiQmIWrhgjGX9w4o2A93hBd4N2rPHnu4RVbKwfj6B8Rr9dwV92ST7VFhYjyHenQ==","shasum":"f186f41feacd20ef50505cd60fcea0ff13316934","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.71cc24fb.0.tgz","fileCount":26,"unpackedSize":101231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnGCRA9TVsSAnZWagAAibYQAI3FYc6OFzayfC2MdRfD\n+jVUQZ/3o6chl98xB4dcMEH7S5H5vv42snzICfyyq0unBI0KTbKnL3wuXn3O\nUs8xls2vOtdVjZ9FTs+iKaEkrEFzJKHiXL/JemRw7j4WQ3zqlFLC/DH6oYWO\npRYQQ8WT9tMV0KOyt+sB4kMbY/aOGvj30U+zRttK35swKCKoi5aKgN3bk/G/\ntZxJvjTbIa3GUaCMQMzO1zBeZTR0tYajbgfDNLNXJ+A7tT+Aw5shA0xWXZZK\nE+0MGQr2IgLQ0QqyiGq0tQxIr8PUbcARuR84U92nMCLTfrm6BD43XeCYOpoz\ny/aT+pQIwZNeW5PtAL3zea6L2u/qZoFHiRYpgdwjIwYVcXPRQ0GMNg+7ko1D\nnkK4RD/cvPttscD0ZNVBQtgu6r4ReQRsbxotuM1XVlblrSm5eJdTY7aZH0aV\ngcXx3/U+r/j9C2+uGOHDgcQ6QwbzB+zcmhFxxG4LeQPJldL+S8E4niB/c6RQ\nz9ab2iEu4z0gxfMuQiiJbewLdDK02lSTufKKsxr9rMPuaf/aFTptdjRIS3eG\ntprqtR7ca+F/C0/GEXKgPwdyZ42iIhG9jYwtuzx7k7Fh7gmUyqAOZMslQrDL\nx33+kpADuET+MCFlGR2tqq2A3R7PZZE/fhMUh7n0Z+sBXDrswYH+f/nJAcWV\nn61+\r\n=1d+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSjh+mTdbXBi9tdxB8OcXWqYZiFkPbnBdHkOCyz3TizAiEAk1T5CtlyGV6oWj11UjdHjvYV/+YeSh6tZuE4YP7f18Q="}]},"_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-ripple_0.20.0-canary.71cc24fb.0_1605654982160_0.08829303261039212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.761027ff.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/ripple":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-eLXDwbDRRqreMWPm9GzJ+wpSnx4rf+2bfloCNI3eemLMH6s1K6429azKaLeNNvcamFBmcCJtthd5aiPNVnATYw==","shasum":"e846444c08ea6b5cb4677d2a4bf0c679c60bdcbb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.761027ff.0.tgz","fileCount":26,"unpackedSize":101231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyRCRA9TVsSAnZWagAAW4MQAJaRU4xa5IcqEO6Wpll7\nTMFk2QULmDe1Wa0IchL6Ptr8uXqLikm9B17jO/tuV0+RLHPah+IVQmT4o5YX\nzaif7ekXFviQaBO4GKnDu3iahkaN4er0Ho5+8nNgx9dOFqbXSuO4C43Quw09\neHFDvl8b14pdehv5SVdsScj9xymJJ1mxV38lRUJkoyhUEppVVWE5M7GHuU0H\n/PJUEZzNbSTbyel6D4bl+aOQ5JzI/7rDzAWqVIjXtnghWPXYy67TCukIEPTG\nTtC+i0aqWrIgVQj5fVstjlivmtk/Jjft6zxWRisQcEMQZQlp6L3XXl3sXPFn\nCvSN/CFmLpfFPb3EE55ZypwqcTddtQ6tdTx5NOetFXcVkchRADDp7U6J55+5\nk6s7xxk2M7TwqeYJihiHHCZwBUsQh1BRtUuFqM9ZyNYbi/xVh0i+1OQk5Wum\nYHx9gXEI5YFPL0ng/pD8hTmlc8+fUwQc8GnkknwnZ9RcTHlgqUIfiulLX8e3\nPtCBSK532INGzfZR5t3ACIo9LWAYBO4GSgwWBI/yY2xyUSM8iDfoKPsawAq2\nD+ZDGQYCTZ3FAXIkkLIUcHw2/GJhcYg5Jr2OH13l+MRLzR1s98n5dNz664SR\nXq3vAdHjlwkBd/kazT7k1WH5aRBOx1XqwbPhXstj08lXTBDXoqf+cg/WaZPI\nB7Jd\r\n=UcWu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDN/Ll36Jk/eF95TBJ1vnP7N8Kt/ea6PJ/3Xq0x21/KNAiEAlIytJ0evtZrdPCHZYKVGmOERL47OrJJkZxhNV2mKzEM="}]},"_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-ripple_0.20.0-canary.761027ff.0_1605737617468_0.12243193545766418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.dc93d04c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-sUHahEoZuGpKnHdAKRPEFS2nh0per2F75ANne8EJtfdB2gQgc5K8KukrZFbRQplRr3lMdHLtnQHlrYmfeWkuYQ==","shasum":"91b21c629818eec6319f3e30f57bcdaafbe2f92a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.dc93d04c.0.tgz","fileCount":26,"unpackedSize":101231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ32CRA9TVsSAnZWagAALEUP/3XQtFyONfUJzILnq8lf\n+4BY7QxSVyr9WRb1e4lxUf8oCXmgqEgWM1pOEbty7+w7IK7Twm47MnQYxpHP\nLJMi8+oGioAeNdMVfydoYI6N9/42vKzN5Ks4yBi0LRy8ii8dwYtN6PATnZsz\nPIHedfx7ktLT1CU6f/zMYHYjkZtN10m6Uso8Uj41l8dk4CPbTOXfRCs2QNR5\nb4m/cmtrnDyQjAFWGfJcYlEev3xpe8R05S8PMYziUTQfODYN2MIC5vnh7gG/\nLkI6qlATTgwCgYUh75j9MGE9IMyLR89Gn4txZQ7fmW7qgAtyxdi8Wswl5wHt\nT46N3cw9tW1LdyfCsN1gqzr6Z08hy5oU6UD9esiICrKGyVBlpArQXWUSfZyD\nNRPrTrL0hgH+T2xEK2bQzIavCLjEIwsPH/5uaiqxWUrYrW4fV9PW5A4vsMtw\niJT6SiDqC6FZCMY8/xQeqEhcxC+aCMJ9xrk5sMNGVJGug/z21tPvZWTl+0RW\nKdYJIHOQ47P8VQKESPHTzEPgtD2ZDttbZFMaxmljfywk8+M5vnU1jiEq2h+N\n0hHiUboxeGYDKjrVqYFibLDOAg2lWiEewUrNQEnKoqO3urZxCL9CMk5osK4S\nLFDG/nEk/9P/2AF0adGrxT5B0Y82MSBQQ23I9bS3y9eny1VijfZIYT6/+Tqo\nRc1D\r\n=p9Pr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAtZceAjwn/xCYR6IBS67PFgxq6A9beu0cUNO4JFKZaAIhALClGsXE002P1++zjFeVwHaVYE1GMLxkIR4qQztRAphH"}]},"_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-ripple_0.20.0-canary.dc93d04c.0_1605737974071_0.8788304457763809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ysmo181q8VTlaNd5oUIcpufRwyT35RZefu3+OcRmScLQdtqfgF81O4kaUwbL7pvyM8P7bnIdSfEdtvolyNa+0Q==","shasum":"8daf7c4c9dba904835d3d1ebb9015cffc6926dfa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":26,"unpackedSize":101231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldICRA9TVsSAnZWagAAUU0P/2aqEusq3xB/c5Fe5N9Z\ns+q1hgReAEJunpDwuU2o2585WYxvY2mxDS92Xx/8MrsHiCwFhDN9aDkprkJ7\nr+bZX2FkXVvD/q4ZvnfqpCJLQlBQUO9/EEF0249to8hR4EVuV7ZdfVe36Kuf\n6yNKPgLLmOI8FXJVNbM8izVpdoH/gM08Is/kHnpK32ZZU+wHxJjqwYS4v0Fz\nzqtZYr3fxPVU3t82g4MFtCoFch7h0B7u5cKKVYfTFDHR/wN2P7v1hXE57XtG\nwDdP7pUtRNZcpWm7fE6ulYwsM/yxF9Y2diWyAoLhX06MI2iXBUYsIbopDT2R\nVL3OVzUzfhrPLy7qbtd4vxAU8jNCvoxVhotCH9DkSo3+VBFP5t3NShnn5JGu\nP/qhiiac7PnWgxIRcS1lH3edasrRzQ7GOsNic2kC5trAJkXYAEJxJsnjf3My\n4jrzrEOrMTtVjhNUgvR8OJE+kr+slF14iDIwpUg/Qu4GLFwdZziaxh1UAC/F\nnevpLlYAJl9Rh/IdO1kYbGhB/XXjBLQvm30cftfWWTXVRasEqsKuKe1PHfHB\nzgQj6lHX5uOCMMlN/OV+jH4Th+LR046Ne256ihQo8zAaYKwMk/ZPv9ypTsHT\nD2/jA3TLQYjG3jv3dhLjr/RdRPrN2VbeM7kN4YUPboLoGJhqy37RVVoPO3hW\nOdx8\r\n=FY0i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTz+Aen+iFAPgj5LM1z13dbNZp5YqLdpkKpFMOJubKEwIhALx3w/1DNrlAUqGv9dBJuddq+7KYcJhRS0vJiWFpvj+Y"}]},"_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-ripple_0.20.0-canary.4a5d4eeb.0_1605785416260_0.5496365725423593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.bd176a15.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/ripple":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rtLstQxDscTuzKv4cTeFgaXWDtso7Mwn8dtwg4d4POcF6eFoc+tup5OOPBQNpytFRtLxiSI6DJOfJNlg1RZp1g==","shasum":"faf281983327ab03fd45c013ad219f6513f6727b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.bd176a15.0.tgz","fileCount":26,"unpackedSize":101231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsL+CRA9TVsSAnZWagAAORcP/2axvlhe15fTVV8L1EVG\n54mD+oidjDjGE0yLc+TDgk79SCz/p2wL8/bbR+D4odZVXQ+SRtoAOAcTkNum\n0/hDAlAsC8x7CimlxDFzWQ2rRWQXy84NOFdYxr+6kbpqsOCVTg8GL0G3VjiS\nGUTPTZfRjoU5XDxE5kiuJGq4NOlZZUgnT+kw9SjX7mUOeltauSBy4uVds3xR\nIoi32z8uFGfBzJGlwAB+LH5RZcZ4r1XdsaIPJh2xzceU1WqTDfPbaBKQg0u+\n56LiiU7YVO3VgGbySGbtwO/VbuyCcFu86b7jAyGUTxo/3WoSI/6p6i6GiIuy\n06mOhmNxef5dM2+P+myhmmrsS2tmHSOkW43DKf1MSUdVSwQ1WZLN+2P6Jz8N\n9FTqZ6vbpqIwjWcDMtQwvPdJ29y7UPHnJb/C/3PXOSAdkY0NPChDkBpJqWbV\nF5LGLFGrD3Ui1houwcbh+5t2Yjocn5KQEiUPmYSelCUw5Cx7Nkw7B+sGEPrh\nHVoamEQAwRprL9CAjd1ErFrjjxOOEJFiw029h5/hcRmhkNxy6B9TLbA5JNz9\nM5N5Bj1KMUkN0Vj8pzsYx5XBn0TNdrTiy2b4s8f5N0EseUvHWyddJSy4FUrJ\nLyUPZ2Jxc4oFlB7cDh3d/jv8Sdaxve0qTx1tb0h4G2MPzSykY71UGpBwoYPw\nllUm\r\n=xI5l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH3mVnRw+WriK1bqH8ho29n4UXsIWDpPaFQ6ckV6f8lwIhALnArc+ou13dkin4TYQmkjm4WltDP3ZU48Es5tCRRmzP"}]},"_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-ripple_0.20.0-canary.bd176a15.0_1605812990302_0.6083106711305486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.e85aa60d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BiJDaukHBolEZ7pi+tLdnc6JS+5J/GbAHYw0bpC8eQsLmIBcAL8LZQh3DG5qkVX0cKdfY8LdFSx7TV8vJyeYlA==","shasum":"3408f04f3132afaf01d919428f2a42b6f5d356e7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.e85aa60d.0.tgz","fileCount":26,"unpackedSize":101275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaRCRA9TVsSAnZWagAAiYEP/A9tyf9AjZ0S2XH+bgLP\n3Or6gBaqxk0x0Ai+Xkh+P29gc1daew+93gZlE0rHPBM9xKEmw3JGt2w0Y7J1\nZMCRCDcFpD+Au4UCvPWNFaVCv2p14tr8YdtvvV30ly5ug7QWrDShO3ipgxuA\nBOCYlPXTjhisWcvX5BVQvjjAURMxCia4/o9a9MAcJ/DPjzH3AgEZlHV/ASJm\nrK/Sb9ZLa5t+W/HwQvb6nmtJcasOzXV3O+l71pT8L7ghiWPoJXjxY0XByUwm\nmg0Gg9b0fVDiCWjPvyxFmorN1DcaPpczW9EWoVHfk5rYFY+NL6oIVqg84v2H\nOHdzNMwFNbNtyXfRMnn3anRwOxMOjb+Rbm+pjaKgr9hJCkw1jYN4Odlrhj0R\nlRvNIJueC+H+e89TSNMYvgKmVF2KcG65PE3RMh+Xyiu9PkP0kLOL/8OrndKM\nQ/8yGzsdxDrqyYxMSXVQ7BOQQilYacuhVYYU4S7TLio1F3NXt7Mvm8KZdGYZ\nMtPR/NG9Z9K6JuuR+xeiw74uDyd7OKirzPyp8K1TSTUNNaBVfyC1Nd46w3Nm\nyKA4WOpmSf9J+M+11C5Yh9juBcygNxXOcbuW7zPX/3lUnW1JdR2h3t0qwJEk\nN1mCF5MQVomvdfHAgX6Y4Qt/ZY1Cv1Yrkx4bj2LEIWVpvNkrMQDO8J9DwzZe\nu8nV\r\n=Bi7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5IqvHcTal/9V7ie4v7YgHlLNr4oSSQprKCmDarDBL5wIgUtcgiE8pjVTinDOiTJgngF05uQ7ShrAvShIcdXK1Hs4="}]},"_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-ripple_0.20.0-canary.e85aa60d.0_1606170257244_0.6485535197966386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.72092360.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-s6HYomxRUXFgkILuS7VzIHcscgPETzBB6Ihu7k4fbguieTgDICxV0ruQthqapDx27QaC7FXNZpM8voLLkM9b4Q==","shasum":"c03d38d666039de72282fa28df7af1fe2c3a5512","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.72092360.0.tgz","fileCount":23,"unpackedSize":80498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIltCRA9TVsSAnZWagAAnyoP/0GrbSB5BcHWEN8APSHI\nDGSZVOjr4bAwPI4CGGzx8DKRRRShi6+XP9gNPwJ/XPjjx9B1qELKnPSY/qki\nhfoiJWHp3x6ELFXKdJ+z2jlscLURMsFFGiDyFJ9Mpq/2gl102vvCMG69Ydhi\nP9cxgl7Mf7FwF/re+97/YVkGXN7+TatDAQ8tU2xfHtnaCSHv4JZXeztBqlGC\nxBn+wZXOp79ygDKiE+77JWtniLMUWGF26GCykF80rrwhRyWbgj7L3U/VksGU\noq0VtARaHj2ins3C46daw4Ev3+FTpaLOLuDAv9uwvgIo/NsCwqb3gsF4hXjQ\nhGBDRrYxnPgqYdTFrJ9rWjXkhr59e1C5OO02cibHzSuxLMfVd4F+XbWfoGRF\nq/qCHMGO4yxvbi5+can1D80xfisc4hXbRe7F9GrUrGyVdJ7AVREc7oGbwFQ1\ngNHkeaAlUzCQ1Sbaw0GQXAG9XfNUNBnK+5VFNtCshKy+ID5ptU3PUHJgB6+J\n9XeeBCObeI/ksxzKkzfBizv0WsKIdjhrBgIrNuRpTgoaTbUPV6Y53TUq93wZ\nV1z0SbSQeWfxtiEjdo+PGebf5CJUVeVaRiMXGzK7kGQLX9exQqqNW7ebQ7uV\nIc8zrnxcR80HEv4ru01vueOcYO2V7W7jxfp+E1bNmNPj+AKj17x0G0oqSjSw\nzWye\r\n=Fzme\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiHA40dQYAjRAkm9OHwU12GCmUIaydBw14lAalfbssuAIgKgMMEbqRHx9AhPAs7zdLrdSc/l8nndHYNMvOWNT8kvM="}]},"_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-ripple_0.20.0-canary.72092360.0_1606191469017_0.3859306423988349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.baf9d39f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uipDNoA2+/CDN2FgKm99PKBgwCKZUFeZEbfq/eq0R3zT5YWMLVJmVE3GGus02WPqhvOENqmvuvZIx/DbNce2dA==","shasum":"b8999731f7532f1f7642a3171ca25c2a30d3562b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.baf9d39f.0.tgz","fileCount":23,"unpackedSize":80498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEQCRA9TVsSAnZWagAAigAP/RkznW+mBrtjDYNWDeR0\nuOooB6ErNMRYEGzbZLVWNtskV5/GDHEMxiBL0ZIA8X5CfAOYzs5M6elc4Apv\n8HfcbWcRy7CWXO71WuKQCTwGW7kJRVzThXz6KoNrlDUA1UOsUWTzWO2RhOvY\nj5eDZyogHQYlnzfPjJJDxwzKYs+gjk7pvuQqwud/rtrGKTsEpyr1Ib9qvMHG\nKAyoEzqBkaAS1fHUF3y7y90Qtk1Sx1BjgoVL0aC8Z57ZcUZmVeY4NhrSHD4P\nPtWqcjZ+x1mUGQ8qy1Yi7OFwJSLR8HiSZMzAqOXyP8Cuvaz/wr3zeGp/uMi9\n7PJhacqqMw8ikNZ2l5buog5CbQwymlGVhvx2yYGAOjAuLCU2b/gplI1rcVng\nYQPPEDRefDmnBSKvSuhD/umNssIECG5W89cs7ZIoHLXGw8TYs2pl/OAZpX9g\nG0ywQdZ9Jo9z43wcEG/L7tAOJqRDPl0gUhigN+hKGytC4L3FPf/ICDwtdhjx\nnv8j1LrUaFcH9rh9KTYd5blk8kUfbiNcObEgi65wZplFaNSOCXnp9s0d6GH2\nJlT6qa1FcsW+BFSB/+I3jU9vNOU5jZ7Z7Jjg2eTYs9sfhf3eX7lDoVKrowLi\nFqNjVu4Xs0YIAbxnOkSUW+cOSeGzxwqlzh4s/HJnKlVzeaTOdou20/ADqObJ\njrcS\r\n=2zb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDWPmwhuYMVG/Quy307HKTpckSdRXtiLUj8xPy6B+LhzAiBxV2Mii43v27An8PWJccMnA87ePNHBTRWvmCXccsjVvA=="}]},"_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-ripple_0.20.0-canary.baf9d39f.0_1606340880265_0.17701001351283918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.51aab0ad.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TCKauVozNA4/IBTYHhMeY1N/cIDzowFOIkQ9DfCTVw6nP6BgbG1S7lzAynmkp1DBTaKs53KD7xF8yCaTZATFzA==","shasum":"1531c2a21645fe0e9397f4ab993f72709b2b544c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.51aab0ad.0.tgz","fileCount":23,"unpackedSize":80498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZa2CRA9TVsSAnZWagAAGdQP/j2OgXk2ke2qM1HGD0Wt\nHJYjwUFZUxaudth5Qv9yjl//OFJod5Ud8sF8jVN9K6gyDCOZzjS5mprEJM4+\ndnsvPz0xdbpkUSHdr9w63KQbeiI/UnNzER2i/cfos7Zww8yqRNq6QSrHElAy\n+GTjhrBL2dkfrP/H9Zav42jxfwgBhkM6QF/rBFxvFaohfLV9TrFk6IByGBfH\nbW8MHYdHTk5SwMm2weGucL24U6R5MlBapNsOT2AHNvtid9Ticx68yRBDNOkN\n28v9CMyNMP5ZpSE39n+dpYvV7ktKSoj4yExnDGEf3graXw3LU8rrY+jNQNM0\nN539wlBBUIh4aIg8iySiyHd02eXkIdeDp9SiFpPO/DUYy0y7XVgR2XbG8kvb\niosKAq70YywrT4H51+Tr+tLu58G3BgMb5cOchX+YWZ+FahUlTQw8wR4N6rAS\nW5MaJmban3GTQ87Iome2M0YuRVfnoAqJI96YEYNba6hhndP7CSCQUJk1kaWB\nnKHHVWOmubiOC7g1KklHxCfOyGTQla4DXTXpC3C5EzGLhxvYM6WauxGbbep+\nGuFBYnJgsUSAbQ6DMEcnuhwB5aDMWkEmAuZKf8YsYtDHGllgkNR94ciVQun7\n6lvkufWFH14o07OqCdnDdXFqFynbSFPHKqmymrkL9e7XuKYXpQcIiOsCZpZe\naNBY\r\n=nGw2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOwPb5ppScmWkE2UDlWvhna895JMvyBCj9xT6y/OpjlgIgQ9L626irUueYZ3a66CxFqNSiB0wlZsL3CQf8TseKjdw="}]},"_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-ripple_0.20.0-canary.51aab0ad.0_1606784693593_0.5176443151180616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ybq/HGwjQISfz8ZDQTAN+15Mnkuct9KmtR/Uzm58wT43xEF1pZH3t/EChywIQ2ahL0Y+dxKCQxf5rO2DDN7Igg==","shasum":"28c6f51e944dbe6df2dd49526c44de1dc2453cc7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.8fd4af5b.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDICRA9TVsSAnZWagAAaYkP/3sKf4EnXnrFSkg6Li7e\n7Iiryv1pi5/BNrZLzmuw/hM8C4S1NZ966wj4ZTE1v1Sq9ez8U2Ha4Edwm4bl\nWloO0wuMct/+NObXsY713jU8BjT6mtAflRmfLsy0WIA4QZVUxDj6RtaG66TB\nhymYiQJFIUOSEBGfiAqxCQ+vxR/x7r8lIByZZu/JP+xRcObnY7sn/epJerp+\nW7QJl3l6i+XwJg0CHjZA3J9bG9VtN+Ih4n1DaijKGB5/OE5g+a9tVkpaJqS+\nIcBAygWXGKAAyQmCkc1FY7KTZRDW1pZJbHTmVRoC5WoNCcs62AwJek0/FI6Q\n2EaqhH5F0dkOpf+4hCswGLMm6el//+Hxq9rI1cTPfUOcRBtFmPdFACGsDPze\n5RQr8mbV2nSzl5+JSILE8+yvkKKKSyQszrTKvEih1MYM9sReXDsWtCUNHmMF\nkZDD00fyza4edpwbbEUKX2v+ahaNfApJ+kfOs+/BWqFZvSiBxLPw+nVZ0r9l\nQO9al5WY9Sux9PffVOZJO+M8fTvmS/QtrU28PEiK/Dj8Y5AI4z7ZY/1G+57+\nl7CiNP36/5jeBbDX30l8UHbCa0HR4cdpDIQenqoG+BD+Q8RejOxIKK2GSd3Q\nnIMqKpfZGb3DHo+B8q3CnAob3rDlNQ/JuVFwcC+mdxbB4VpIXRtyFduhpvdN\naw8u\r\n=2n/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMZZLd7VHtoQFMINMS2/0ue3ORAAd86OijI2H1X0kQuAiEAjjyJftRLAyXJqAl/hqcODSFyHbXc59/dX17kmdTRr58="}]},"_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-ripple_0.20.0-canary.8fd4af5b.0_1606955207761_0.4372056623589484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.26d14d2f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nxkC8f4dfG9KobXv1Zko2kC/Su/cSfZEucFOkQCkfTvXTX0viaTD1RSEdORhT//2FdvoRc/XXgI0xTnjWRPI5g==","shasum":"1e093a0b6da3f102e005bf52248c0b3b4d0c18c3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.26d14d2f.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDd/CRA9TVsSAnZWagAAcIMP/iP88M8ZUlLZctZcuQ8b\nOrUcedoaqooKXam5uMkjK3VppW9X+A9DPA+bK6KXHA5RYARLaPDKteGMlblE\nXfmkBbt3JPYo68TX6oUUL3mFa2yErf/G+zpMtVEQKqkJHnl50+KjOuYolEjB\ngMU2FK+aTTNHnaVMUdvpFJa8KXu3IHxtchhFdLcY/nR0oxLaWbLICV8H371Q\nXM47GJXxO7NwnIwUvo0ej4Q/MoK+UW3e5Yt8MJi7Nb//h9mbnQoGbJAcgeMA\n3kjBHibYTms3j92VQ9/1a5i2hKbP9o9pax2TBQdFkMB5ZNksEB7CMzdRASWx\nvyXWE2Jn2ZF9lDYe46H9FSsNO3ARLBfHN+smlioS5JqE3Zi6txghVD5HGXDU\nE6BBVXV+/TDSoPZuT1ZCjYRCuNuDh+xveHbTWBMimigzYYpJe5yR27SGK/du\nqHbJYCjuOuFTLuKx6cst32xPn61w66+gaeNiRVlyGrtfvW4fN5dqMhgO4j0s\nOBYl/uyJvxMPXAM9C4mUDt+w4UwdcLMR9NYSC7hTvQdHlOyIHbcpdzcArjPm\nggQD756TZVWHdeC15/NKCsOED62TcnepOksNsAZdvLI2WW2nVm86GVn2SrmN\nUHanhNaYXskKQmvsb/WcThAHNQeaMRehZ/2Z4xEJeX/l5k9kiPbR6qNgLXqs\nmv9z\r\n=a03y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOaOTY4v0KdVlE0XW1y7JQDOJTDEGzh7tIDJAEorIQlAiAs6chzD+iLCCa0TfFcFc7LjEH6je+a37EY4/sL3OLRJA=="}]},"_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-ripple_0.20.0-canary.26d14d2f.0_1606956926744_0.8728617799207739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.1663d7e4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HNuVI1lLjGonY9EwYpMrtex+ua4D/dvXo5Tt2jSwydPyKa6nsNwJgtzTYw3omCRAjFCcgOOwAIIpLsOFFJiQCQ==","shasum":"d11300936b0432f1b3418aae3dc134a7147c9987","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.1663d7e4.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxYCRA9TVsSAnZWagAAK70QAI0Hk9z++4q8YD28XKd+\nEi0S4+G2A84npcdSwFR/vhvjQlIlH+4mXRkzF6nG1MmNx3Bae3OW4u+v2oal\nabuOTqCS2GLiLPsHRFuXHRbfAkZ5vm7ZZ8L9RLYnriXVjmTdGiX2HgF8T/JG\nL7pdqYrQHGvrx4obEdTbtjCY+fcwqgJTCScTGYqDDOqyMS3fFaJ/qLz/15dE\nuDzdKjuYOJ7JGtJAlfoprCgMZFSAP9pIGmHLg8aOhRLuAE+feC6gE1hf65dO\nBpxSan9MEnRa+7y6+waHkD2qpUSFhCnc5N82HR0E0cPZJXuYA1+L4ZOfuixF\nGYQ72+b5mrE7t5pFv/UnBZLvTTQgcCzISU22CGQtJlq0UKc8RnF9wG1ajq43\nzLTf0mViT4TcRJ7oENiPXggx0J2sDtz6p3ci/md5f0OodbKwXg3GyDfZplvE\nHWVbKwFurl8/GSYco1fFUpERwtep4jb3FLY34//vgmjLReogM8JyoXu8A4jb\n+2WOoTQbgDjNgbZ6edFKwJY6cCY+sXMMuhYFTPRDwEddFVKLPtUOStbteJ7c\nPgjRH4Suu+LR/LwqtzHsZURiQZkZe39yXk5PhCDs/AidbLL3Z+3UvFmsE76l\n4dKDd57vbHSCtf3WGHl6xtG0f0UJnegLGFueurQFR9tQM2PxiNNjqMBcl/8d\nB1hF\r\n=rMtZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRJ/Sax+j0QkXQ6ysszQe2lmrGjFWcRvekYlCiOG8CjAIgAwGxKFj8EE58JeB5DuMSpNS+WV041XihnF5XMUgbp7M="}]},"_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-ripple_0.20.0-canary.1663d7e4.0_1606958167402_0.5181702643501478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wvPtm4WDWvSkRzsGF4VEIWRQczr44J3Y7Ri+Ii8U/x6E1NuxLjkI/+4ZHhrwPnaZSfVb66n6rBYhmX/hm8vQGg==","shasum":"044d19047469f59015c4c6d99974c47458b7b94f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.cbe9fc12.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdJCRA9TVsSAnZWagAAi4kQAJBgeJqlW2L6iYmLS+nY\nKbQtkDsW8iZZBsOCjG2LGHNO+BHIqG6V1zrAUm7DBKyAu6nfwWJ92MRtzBdH\n3JHAaRRi44QTM2JGbJbstkhcO7KiS+JK495e8xo5hxjKr8sSJV1EttA55BWI\n66bFKhsn2/SJHKX8x8ZV47SEbJe6k57bofak6IiwLeDznZ+A+hgtY8kVpKzT\nIj7/bVoRxmIBgeFtqi/fTZpAJwUOlaMEKatcxlr3I2BWaBF+9hq6xIm+rl8E\n4umPbr0M5xx/lfhfdlGcKZkq++0/HEcmzlCfL5UdWryBWYmnrPUsFrUHs79L\nOUEsOv3e4iLyie978rZoKcoS460BgWLYKYptbmxiFM2Y14kPDYGXfxZKU0uR\nEro8lJfJdLePG2GUyIvCeLWJ2v9+8QNPQlY/H+oKN3V3IqOU0hq8KAasH5wb\na4zqVLUFjo3IGz3wu8wQ5gGOQ8BLXf29ywkn7KwicTUyDuOLSdsH3VDwBcjZ\nSYRjQT6Z/8cNp1RVqQQVptn9icVL1EI2JH9xCqQmZEqJQbMzVQrN03zgYcKP\nv4bftfWEcKhUiFMSXSI3wVee9ZMB2nrv5URe8rzyW0bQ5XEclJN4Pnyae9pA\nmQzt0JKbq1JjxYK3k9MwXSiztcfO32uoS/cNP5mwJiv3NGL0qzjPcT9XioVb\nTjO+\r\n=1Rsh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH6Gd1t4b+dUqv7ij2D2+qfvW+WeFLnoZp1aeBG9NLxQIgJb7dGlu0l8a9tb18L1rnLPv4SRDZJjKfpr12icxMB6I="}]},"_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-ripple_0.20.0-canary.cbe9fc12.0_1607022408416_0.5222123089832027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.9755be10.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U7q/aHDRgscUKCZAL7Qyoao12aB7W16JPBo+2jVVRQWq3/UkAXgMtr5HSsZTdOkzd0WzL5EObCqQv0qf2drGHg==","shasum":"c0c522be779ef352ae367f11b15ec4b6d8d797c4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.9755be10.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuKCRA9TVsSAnZWagAAvxcP/jd9Dt8aaI1z4eQ17eHk\nrGwNQ/dLPD1M/15uqwpDAMJu8nnPGiSo1GYWLSKV3fbP/t/w/fJCSuwyBmq+\nMdmmWIoIN9P/yrnAebYWvNQWnAbVlHDZ31ZBGnCMF8omqehedgSfwSKiDwRx\nFYyIzg3QC7VtaN+bIh0zgORO+okzh6d1Uslhl6zUSh/7UJtinR2aKy4hbqZA\noBgj7Sg/RWmzKzhV2MOvbB99mD1Q3e+6lhP4t/wXIvWa2rNaqn0YSsp8CdHi\ngg/FLtmh8J3O1QOsxthwlfCmGrZCBF7poYVjsjAmoCs6imboIBhqmFuWIC3t\ndu2JSCDfDz5+Liap0Ftz0OZwT2Cn88ROhPqheswjCy6ea/uBFjevdluK5KMh\n5o5j6p+OWu8CTkLeqfCqTN7XPfDWdnJI/I9BFwEzhOk+h1B0K14VtUQ4b++e\naadqoodcdfUNDscgbvKBhv7bxje/EDHoKAJyB9oo0lw12d6faSWVkLCkqe+d\nvr8KN3qTEybbIjX2UkyLNJWtNvDDfcQOukC+L5Go3nKcbM5z0WXdiXmpbyI1\nvRy7HYkL70ErEZsoII2CGbUzbY2p7Rzojgswb1NDx9Uff98IGdZPtDgalsl/\nATEW6MYZ4n0HOdasTv568Khn2zYJfxDv3Sg9AaMerrybjBt8Cc0N6prVMasY\nBeLu\r\n=qlqz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH6v9ybT0HGi+SgO44+N6as9HFbYbDdrm4lo9VlO8t4gIgBiqQrRVpM+NupRkbSnY4LRNjUm+BVt1QjblKgkBgpEk="}]},"_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-ripple_0.20.0-canary.9755be10.0_1607023497779_0.665202706752805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-ripple","version":"0.20.0-canary.3f64270c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I6FZ8x7y5lbs23LUZ13zTq7/p2tuIT7BOZlcS8idhmTjCFbJCHp/Bk63yphIz4wYMmRj+hzdpvKz5MpUi08E+Q==","shasum":"43d57ec73e12701915c68e66c027ec7fe64f5408","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0-canary.3f64270c.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1iCRA9TVsSAnZWagAADWIP/R/sVAJkZ0r3B8aLPQex\nTxgEuxAB7wkAf5Ok+UIfSOjwdiApKd429MONpIoAJfCmokBEh1DJNjFYOZE4\n/E28hqor6qpWZ5iO2ZePRsfjzJxuP/B4GfMWuq4VpFDLpJ4L2ETkXPYxrQl1\nNBJCAGqEsPbIUTlQj8teIBmP5DTFwLTXFshScsgzkjaoAMcQdu8j0KwsnvUN\nPDs1xBIUYY2eb9pruEKiWiVfrvL/7eZq/lFLaobBaN96zIPHsElmoLSQPExW\npFsvkAtnG3+NDnuwP2anfD/a5KX1K/Ff4JUNcnCYhbLVg8LDeAe7PNbWYz3W\nzZ8F+0Mo7qElGTMxJjbNnvDUpRQBOPiOzHY+Dils8ulrfFTM9B0IANLqHfPD\nbBQgN4obGb6rh/wTbHghFIelcwZXGaXTQVTglOcZxHFfhf+Ofq2KQT/KZGIk\nf32hYM+bdhZKmrvNlvt9jYC70wiwPYA5G+weNVtX5YuCOUauSHvRkgMhzfB3\nBDNMVr/fJktT8Mi58TjBrM8xB6U2hdrRg9lUAelk1JhuR77ttlQYWUWO5eSR\n/mSGnX5pU4avikuKHMVzmlYC+5Q169mOJP8OoB8MQImMPURucejahdfU4jrg\ne3mn6Peq9VuPDicgNZIA07CVfhSDmz1n14Any/6t3nJV1SNoZvOQq3WOr5/A\nzZQa\r\n=Zq+Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdqQqxP6GZIJvD4BnnIJCvE+TP85s48el6c3yQr9oSKAiBVqdTWFrv2M4xXzl23ON0S2K8MtCw60ErKAjUQ4xlTbg=="}]},"_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-ripple_0.20.0-canary.3f64270c.0_1607032161551_0.5816679513910921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.d893b14a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QRB8PHwiCLoNNE3ThCwdP8L+CpHG1wPOvdlscyCtcZcipBe3qqCgA/qzwqJaKMgTMVGnv0MlAdh9mh1cuIJxBQ==","shasum":"b858182379556b924df5d4f2539096dd00300936","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.d893b14a.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXbCRA9TVsSAnZWagAAnXIQAJP7zeFJMKReO4wspeCh\nccO4hY373cVPz9DQKEKXWhn4taTLTNALYaDWX2U9yvOeYzBBHKBf5RxIfqjv\nT7XBt2IKeuWI3DRoPIUG0dYkO2jB9+WbFTUrYJwqi9e4hqmYL9JGHCMpIqAb\nKvzh10nwqvNRmBoayzdWy7jbEtGhqUpN9vs6KrQ8afQzF00XKjSt1fngmta7\nmgTr8U+b9renCNEXZhUiqpdwAW4n+YABl7kdM45rbcWHNDK+B9Bx/e0XXK0B\nZcTH9SX4/+eib9Ilp167FerH50um44U59qdZua8A7NiFQ3nuicMTq4Ni7I4l\nyrmZLUg/xpYmfT36NMvIY3L9J35o4izpsvsRFjolBhK4GxFq794S/bvSySfU\nn7rqs9JZsshajXerRUuO4XwCyFc9vkuG7JOcpANan1FBEeE1Zn2eQaeA4fbD\nKmzKf+ynLdN/NqWDpHBBrpgWf/5G2bw8V8hCdXqASNDG302/r9IekpEIFFOQ\n65vIdGjpn3uBP/1WbSDBW+xnAHsnAODiIJng689EiSbUFnKDNy/6Eg23V72W\nCLYl5vkKllK090FIw/qy07WG8r+L2raK0km89muMWnAQhqwdJ6aN7ifhm7BU\nxNfUKplIUPd+dr1uDptLkAYDpn9DcdD7q/lLYRXDkx/yaN2uTqXj7v3p2RWW\n/yBZ\r\n=YOhh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJjv8y7qyZJ+BKxN73a8uiUVywExYB0WBeu0uQaUAhbgIhAP/Etb2HaTWmONN/Yx2SWXXdb/ZxB0TzeEuXzYqLIfzD"}]},"_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-ripple_0.21.0-canary.d893b14a.0_1607034331167_0.2390672315862692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-ripple","version":"0.20.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"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-ripple@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-4rlIu+Kk//NsW/u3CnU1kz3dsvwEozax0Zf2CUp+ao0ozclHfQ2+sTZVY0Mr8+GJLn7Oz51gT5OHoarZuWWljA==","shasum":"ac83eda314b712c2fba293d2732f550dd1c6023b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.20.0.tgz","fileCount":26,"unpackedSize":101297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaXCRA9TVsSAnZWagAAbPkP/RPiA88F/lZFb+p1dd+8\nNro2AJaSc/7UgA0ebKBC4Rl6Puw7Lbu3bBR6bI5lDBsIoHmhoFZ/G+dWm8IR\n8oXTkLqhopGg4iCgPfb4pMYz6OxIhuC1qxpfrEdGJqsMNhlNmArv4egh77V+\n+eHnE61Lh8kvyQKijqBVBKJ9+fok4XzmiBXpvLanW+mf8266QkVCeriY/OHd\nzU1Xe2GeT1HNDaJ/OzUfMmW3WfsZ0BKYOJX3PhLvORyepuFi6pn4zxGLEhed\nXTRN/Q1HEJ7FE6LxCufVO+AAuE2hQ/tayXuZvCk8nPijdhqOTzd3z1iFhqgd\ncz8ZTNo1ZYRjgyPeEmoDjRRQ5cJZRtsYL7FcSElBj2TIlgiiwNQ9HyR2hxxT\nENOVYVlDdXZMOWQKIAwCxfUWpLP5IUpr6pv1lspwKizWigraLQXA5Obt12jX\nGlVCewzh5pGRb6aYA7ACmgGEeLxucGQD+qnVFAd9vorgAxF8Onj59WJqogfL\nlddPAePz/hC6jjjQA+gjj/UToDi+LgqXfKL79aqkOkcz06lvV+f3ERgRe5xF\njHJzVD1iMXFWpv1/C1dfkS+gSTXOpFxq6wKX6DUDk30py+Tw5/bmi9+oHEq5\nLOx/7xIcbkfZ+XnJkyxL3OmX2Yf24GLUUyEbwzoov/ln/6s404IFj9XCO/2e\nfTbe\r\n=ynUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT1lhj2RLPWv+iFLMTDie0gjj5PzX/LYAtDu6nmPZuJQIgGZFd0INVHlENzcEgZE14jL5Ha2o3gOW3HEP44gcVB6k="}]},"_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-ripple_0.20.0_1607034518952_0.7187261761939774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-I4azLgRCFqRKL/6zYf7Wdr4C9psszLAHiVdPZKmKpYztMSoxKrBYGnnHSIccHc00TO3N3N1SBswZ9KikwUDyDw==","shasum":"41d19a0b76800dca74ab30cb50c17858dff9ee2f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.47c7d7e5.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087tCRA9TVsSAnZWagAA0foQAInkLY0ZBCJrQKmnDXIQ\nkNCbT17djmVcC9uXRWKShcPgEFR754pCpwlhAjYL7cLmKSMPOZtyT2SWRKgl\n16ilmCc6qqYFpqo4mczQwAg0QlzycknE3jxN3mLKKa29hPuuqIPcvKCgm1RR\n5IoPsH3vyuzyZ6IE4S/z8SYnqdgH9c2akIvIhZ6xM665ZFNfGQsoTIAzW+Mc\nw0jw03zGKmF5TSQdbJjb8AZO3Z+8Sa68XfXBZrC86WcZniu1Y2osLaetCfy7\nY+d1m26EyCwpuq9vIas+qnC5k/L3ObQ3znuP7mkhkFNA850ni2ey7f2hCXxI\nUAni6PBaoUJSztilTPaX1UM9JM3POW3ZeI6APJ2U4aRPVkZiuNhJJLTyL+R2\nPgb4lG8DB4/i01xN/k8YQAg3BXsON9sXvAMajWpBuZ1VAmuWO7nnn5C/hA5Z\n3oWeHnobtKF47IWwnARisme9ziERhofZkXIjjwuoPgoHs2sXKrkV0PM6VVEk\nbv+aVA+znZH5TuyG8ysg6qpFt8BIw97FoCdfMdNkfWu9GJN8rtRJsNuVhkVM\nMcc1wRyPcfFRA7yG6icIL5aXXnXvBOUMZE4lVAIL3MtNbdMqPi20+dVZPAyS\nQ/9ZcqaJoyQ8L1H14hiLPte3QY/o69MxEjTFlNbuRM61X8P5931AU9vQN4jj\n5kn9\r\n=qWqJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGJeJXrzXhtFeKCusoARvY5k7orDh31cGN+JxWbzbKzwIhAJdoK34zmiO+DnXrScHdAU/8epSL5hyzrQVh9mS6CMki"}]},"_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-ripple_0.21.0-canary.47c7d7e5.0_1607716588954_0.10916190874100273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b304a78b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/ripple":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DhuCjHRNd+rrv3s0gsNKadaZRoIcej1zgeuLZIPbBRslsjC3A6dK6/mcNS5XwLH8SZJs7ZXT34F6VCIMjc3ajA==","shasum":"3c67f9b62d5fead10da2055542badb5d89611b43","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b304a78b.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RaTCRA9TVsSAnZWagAAOxoP/2DB13siy9dD+0pmY5Ge\nmiBo/plYEAkDco0vO3ABwEsg82zriDwHb93vlnyyKrPavVb1plM+tB3bw1AS\nORouFy2hG8nXWCiQs8+ut9L3/ITiPnFZ/c+297YawqRUVqYhwMQPula7o4Yg\n6EOSsBJedQl4pCtRByX9KTRthbNBSoW44JDTmL20waGTMaF1UHUdcQCEeVCQ\nw850z23+4+xAOhvmF88hawpSh67o5xVfj//zdgk/FdM6QdT9JC+MNvHh2k/X\nPZGQLpoIUoctuASFq4WomAnRL7hLLi++4NUCetOOXgcJ7y4KpBhYmpNTS/Ex\nV6xXTH4d00KytgU38hArtqJDntswzlouzTw6niRG6V6xNuT2B5QbEuSrt10Y\nz7NGx4oHGTyIBakFmtfrtbBzdnLAVSKfNa1EHrp+yoyJdT98I/rlmWcHxW/P\n9mjb3+W6APP2HrsQQDR5XrNXjkD32jYSN5T4qjf5ZiVvIei4HWI+PqRm68wu\nFqJOpa73upvv6usl3J7g0rOUU3Nea+jTt4kI7Lf35qReXmOEwfzWJ2lIEiEU\nMDk5IY/QaGsHVLTxe5TBCnu3tlgk8eKVC0sLxHMaPBhW7xZ3y3PpxRTi8+Nl\ngFc1txn7ufLu9GkN/BZds4bwD2sG95F0pnF/WuS8RFvxSOyR7FUW3/1NNDDj\nGn0d\r\n=BtBd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbcMpXepbZnX7ub4+qPWf7ONPSm58UllRK5Y1YUOXJqgIgUcuKoArqVjRJmAMlcqY6sGqeMIKcnUIiCeMxjtqqc38="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b304a78b.0_1608062610759_0.5696500252969603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.777c5fa4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/ripple":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vQyARKEoQtpbVVZbfqitHA2l8AxvNzgrG1Gwg4+mEnj6LBljm3M6LGRJ0yn584+qIr8Q7+3rCL5PeWHAZUVtcA==","shasum":"5f81654d72d167c30017c2f23c6b9546a89da196","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.777c5fa4.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHjCRA9TVsSAnZWagAA0WgP/37WKRu8wZdIsOH5h9N6\nNyPuSfye8MdI5HvClZvJDrMx8nRQozaioJsZomtflcBRMsJ2LULmuVakaFAD\ntJcBt0iFm2zE2WH8xmZjj5RwSPDgWcD/AVq4vAEzgrLcMEC2RaL9uT+Q6q0j\n+HuVHnBPn6KO+mdnKaqFqhOeZoOUvb7I39qofu9nA0FKhZ5cfCTok7PdCuZD\ntAdJLy1JwxZKPPGuvI4Zl0URHb0qyctQlXsQeoAAkssHFXlWD02rnsEsiprY\naEuuFStgVI/jgzrNiPBf+dy8PQtNH4d55Z2HQXs4E/SkhXMvnfhk0zlVwWCv\nT+PtuUPzSKDuTR+0LxesjPCzezIQWICexPWinIp07WOo5bn/+yIP6mlWyY7w\nojbMhEt8Ma1msvJfNjuJTqVte5dD1SRol5EAARfZePQvDXtLQPQ07ZptlGcM\nsthG11rlw1LTqNXnfijpMIGrsDYcvRanDeEArAy3SCsBwQC7fQ+Pygpi85yr\n5F7sGqcZmg4B1uCQnOGvEeXoWu0AX4jieoja2Lw+xUblmMknQAY8OrxSMSjE\nAu6R81Czy4HZpetRFkfQLr5F2gpFTMZmWirVn9ODcp8J8P9A8Xa8PPOyOqY+\nk8cJgL+3+NpOhOxuFYuiOBDtz0BnxeVjES0tOCRQIls7YIrJHuVG2NqQYdQs\n5D7p\r\n=SDGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsDOZNY7bjfJILpOUtTIJ4w1oTgV0vIp4aEZqOSz8rIAiBzHDNBDzuCN7crUmXXSDva/AxrFTBWOkYaK+n31c2Bzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.777c5fa4.0_1608155619179_0.4406152778316281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.635c7996.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0S6S3s9r6TBaI1BcUJ6vtdOFcPUbWGJlC34lfICqBZdfk5FnsefzNaSYZ5cCsFPHd+snARzhdjd8FMqemRo3fw==","shasum":"f371a08e3ced8fb8a2d964d9dcb5207d14bbd0c3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.635c7996.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pLCRA9TVsSAnZWagAAjhIP/RazEi//CykaPRIPLdfb\nmAc3U1yMqU79OJ2mEDy4ky97FkAjgrFqGKuLrYJwXUTt9CfluYqAQtZYhM/V\nyl/DIz4HBeP3Hgt4DU9RUFcWAwdAWuKKTl1LjNafHfiguVnwchGvXd0fZpeu\nK+H+df7NmLb5E5wK+pV3ZCv2895KIITt9UWoMhqV4uePNT+52L5N0VozXqMB\nMXXh84NdWnKQva5LWDAkImcD3TcRTX9qNFPsDIeRRu29Ny1bOqLYm3JYBWdD\nmu0ysABtciK/GY18YvC5z59yoEDHkylg3o7a4SL2ZUvOuKw3/j8ZZVRz+3Fh\n/yQCHLo5PdjxZW9x+ictwWrceYJlPuBXIZr1ZdlRpgIvRzDraagg9nU/LYLl\nrKXRl2I8YbPtqRYpw0REKwu9i0/rW0HizPMMuYIShKafuXHsrJeCVcXlgeXr\nnODvI1A1CFK/9vpZyVjZINkI+jazTJnU/goiS3bf8MpEFvi4Ovs1g7F7uCd+\n2lulmEc7+pbNzmboXpxB770uQd0Cx6adiyMDeFt2wmeCHQB7SKnUbENEbmAv\n4gS+HBVKbVPf3DnhjwSU1xi/F6Cc31UVu3ohTXeV36w6MOhejAfy6eAMO6UK\nNapPCLSjvEYS93h9iZZ+AgCvHtfXGX6c8L1XEpshCB9aizFU//6NBWUkCPbj\ny1j2\r\n=IfRl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDWwYw++8T53May26lH8H1nOVmCx+4i2L9B+ocPFsN6AiEAjV1HGxjR7uRiKzcMzJjmQ6YMXWNBw63g3402P0/w2os="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.635c7996.0_1608247883264_0.02140995430761161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.20b0045f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-81+6P9fEvcwbTw4bXU8z+4wCQLqc0D04+nZmB63EsEtwOUO67eq7M1YathIe4a783I+jT/PnEvougCzUrdeAKA==","shasum":"65ab44ca8799d6b676baa829dac7e875f3513f2d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.20b0045f.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5JCRA9TVsSAnZWagAAQEMP/0yJ1jKAmqe0ZDKVDUTz\nQscFUtVYIxPCL6zcEn56+fcQjQLJzmrQKVfLzdyK+HC5Yxb02+51sH0VrBhl\ncfl5SohfIeQocYmWvRneLnhkbvaPuo82RhMvI18aIhBGTTcVBLd1DCORrPSg\nh3+hqnABs+YwCmtOmN/Xbqtb/x42L8ddQ4x7Jzjyu4PUGI4u531HMgBR2pNM\nCM0wBk3kFN5GXputkStT7/kkHTF0/IZXBXu52pTkoyJDwGIledqTFRSZsVJF\nm7eOmhMpRyk0HOMplRJD7cNHqAf7kLuSlXblA94SBxcz1uAZ1LbgxitmLuGo\nMqA+2it+yGFx/1H6lDsHbdg8NfSjnfy5LYKG8JkEm8rpAf/ub4nxWWVG7EMx\n7wGH8hd9FHWpwQ5u5O9mZtRUCCWczsbwn/TzRFAKF1ggXCG8ARijURIKvv2E\nJMLmBiBqD7i7/zA0j8QVNpHeuE4jLPNtIOM6RRGcq5ivxE99zB/cJ+hrSt0a\ndwvQd7tT6m0EyM+wLRU6tvpwzmqMkx6moPc4t3yhnbhU5aBkXFO4YdE452NQ\npFA6I6UA+v1bopHYHabvXzMRT0/oo1OaWquYSRdznY/YSfU73tsN+OYK/ClV\ntMZjcvL1D6zzjqEQJz4nMAWUYNDnMGp4Fx0cu1rVxNTOO7U0P9r7OL5dMS7c\noRn4\r\n=LMLr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCspBAdXtnXiYbqNHflbM8oSEfhdEYDwlKrELusn2yyjgIgf2NOAqEZ0/WgyvZ6GvFdtv9F/xN36/la85q2/kgAWeU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.20b0045f.0_1608248904966_0.3000233923077351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.41f77000.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gLn3qPJRNxf3/ITUZuozFG/BcbnHxpyPeJPYzfTWdoAaFvDv7ELiSS3FDof42x3gHBCgCiL/HiFCIxhousZSuQ==","shasum":"e08a736b1dddde7d42daae87049787a125bfa2e1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.41f77000.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/kmCRA9TVsSAnZWagAADuwP/R+KYRk9EC3pRNy0oJtM\nZNEibiTzT5Ase6l9HPRqHDrylTU2mmy2lvDzBTZJiRq9HOWRuk+0u+mrEG8/\nJg856tFrtHdTsJ1HwWad0R6mWQYZI9jALSQuu7o5fSq+eFikkPl9aNXLeoLl\n+RfZ27fR10Gh5YZY7VbgvrkYXBUzbOZTo2wEznAFiWH1NP7rFufcf8TmDE4J\n1E8EgWB7aXSZWYpIrUuWKm9J5DLGyO5zwB/hVueUOJt+znSEyLcrnXkebpUs\nDgIMYCkYQ23wvubw7n8RSswwnM2oZgJeyDp+LSERgwpVgtfgeDZ2bMz+6Jjf\n5uJbpfjKIHnkbJ4BuP7/l2JI+tV3z2W3G2r6F13ZZGJlurI/d/OgQIUl5fOu\nrxuwaAk+Cv8Pt6v8ijPgxja8T3HALXnIxkS0fOL1TJY8MAeRkZfmTpI2X6Xl\nEY5H0vYxmndw3d4e4NLeL7ETZE/3f1VSPoZysNpiZaaYLDJcTodjqAYkx07v\nUulohYr1aaNa6HVFS9/0GWA/dL/Y0R+N2TK9Bi6KpJa/lJCDqmtl7c61or9T\nmJKKqkBClc+xHEQ9DLdOsNfg/BJmuSjH2f/Dwpv5VFbgytuNY5icor9+zu1P\nNo1auUjlt1NS0yktGBi0TYLZwFX4uheKI1QcW27IptZsSseVyjLY561A9G/b\nVjAk\r\n=bbNY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwRKNr1t8HmXtoiyRkTZtd8kJq7FJ5dr6tA3N4DmDq0AiBXxhqZi5XD60mIhGcdosl6Bn7zqDFFXvsQ2z9rNii9Wg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.41f77000.0_1608251686140_0.7392101089469152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.afe4079a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dTiKaMfg1IPN6kcQCqsr5C2EOmZbxGGmmRGxXuwyBAwG2qMQdOOk0Jb+H0hvYldQXfDtGFEF0FD6UDO3vRBqvg==","shasum":"95c477c44637f09709672efbc70447106933774d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.afe4079a.0.tgz","fileCount":23,"unpackedSize":80555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9JCRA9TVsSAnZWagAASygP/icap7Cs7f9cax7LuYaU\nHjO+XkTr/OaDXox8Cm2gxJt6G949cEK+/jyoPInKcymVe2Qvj0/iHRyK9XnC\nNNUL2gUQNedd5KdSAS3OKu6DRt4QbJfg0NkOtMsWkYZWIyGvGYgPNbHNvl3Y\nhSNen6B4jlag5tuVS7akEd9nvplBpxiDbietGlvtLZzTxlg9EgcIQo9K8dle\nHpis46A8Mp03gIhoK1Wl9Bu5KqVXmXpM9EDnzw5ecWkt0XDHlf/kwPwFHYrV\n9ONm8XHp9Dpnr171TJXGPO9qR9QlSiTtuY7alW4cBEqT9vYLatmo6yRNQqWg\nmKXiXZ/UUEtLFhojV27TU2lnlLAKNO/aj1zDIvyYSZwHwXZjUIrZjrdods+/\nzaZoHjBi4WM+jpVu5dvJSHxuHM0BlQ9i9sugHJFDDWuE6cVk7BanUKSXV1Lw\no1NA+1Uu2lM1ctIzSqtA2AZ5EYKHlnXzJ8ouxsRfPgSn1kYVE4OCjdJ6K7PL\nP5GiN+P7WNy/OatFhRceWoD4OhURv2c1FmJL1yOvn3yssQLj5117RxWp2Gco\nAtzWexWR7mJXYG1bux9an5wWkwrEflT4JT00td+6oCn80wZuIaWQpGw8gcgn\nFYkylMePmVTY4NydUACuMIAkT2PNA7OHAJSmsGTPtQ75ih4jtND6JZPEhllt\nDyHO\r\n=X3qC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDejG5IoQJlefDyFpNS8HT83OtfqaHDtRq+BlGEt6cZmQIgPLsA8d3oZWdSL7u18vbzP1Vf4Kg6oNR9cESnwxwpWZE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.afe4079a.0_1608658760866_0.17903988485910216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.407ef8f9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/ripple":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ALHUK0kfVlY7E3FYiZNWU82zPpFoSRR0/Fp+C3Spl/DKlRQJROLF1BLRkjx5Y+ldstYH6ZdLS5hXq2kWB2ADRg==","shasum":"177603ecf48b408c465da03f8bd8d9db9f2a178f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.407ef8f9.0.tgz","fileCount":23,"unpackedSize":80558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qb6CRA9TVsSAnZWagAAgYoP/1m2Qedv7BecQNM0GVLQ\n8/SR0lcbxSpFCZmmBGWl8XoEbS0+L2jUNuirDnaPJT7ugZRylRkTBcT075KV\nDKzhKg/Y5VnW7LSBLcQ6hVsgRh1zs7OAezCx29nzfwFaQ0kfLAa2V649up7Y\nqZCu9IzfOBoz3tAN5AK3Cahp6d+W0KugQE6KeZoeUxbVzhgAZUfZw1cDm+9O\nzOP76ExfrozGgZascUy/JI8bSNqF12MSnorWD+6+RLk1xj9j8HFD9U0p8SLi\nVATErVU7aJAlS0rf0Ew97g+A1/3Wza1OZeJRKatbj0EIx01hlZ1RnYLHeDnK\nk3CFyC9DipgK/FAIrC9sCLxxJgZOTgH5j1Ld/x/YSHLahVX0jZXTqoWp1oSI\nr6oZF+a4F76X/eOTqomf+wS0827SnT9iRvoNV8mY2ksOokSBwGHZyfVy3F5t\nmhLsPwnTyX/oEzezakfwjrWtV2iZdZ6flGbSbhSBy1E5+rAScyBOn5Dfh0pJ\n6O9aqCauyr+1A7l6R+rZ2T3mu2vtAxCe48f7J/KhzO3ea5IVH+PLaWoZxxrd\nn0m8mLVNfzacnOWUWGBpK0nXXYkWfjE+ubTiMis4j1ZnkXwKelFchotQt0Vg\nS63iCNvKG4zrc3NkhGQMjqRtyh+/OFqGrZLaNSVgQzLiADdoxNn48pcDNs6N\n6GHh\r\n=hkcm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN53IZNltWHD3+FuBuY80KauWoH/dlkKBvYQU0lgi54AiAznhUCr09AsXHSK/6e36XSfT/JbFE/nwxZVe5UB3tWsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.407ef8f9.0_1609369338316_0.18105032114712816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2e26e137.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/ripple":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lmzIqq0TL5xHXfSM7XhjzDEfU0eJH0QXOlww88vHZtDoW8CWR1jOTihlr1FIhATU+qrX1nshKYHKYqAo/73PlA==","shasum":"74f8b1100c0c80cc1cc708573855df82b9553949","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2e26e137.0.tgz","fileCount":23,"unpackedSize":80558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSnCRA9TVsSAnZWagAAIOQP/1L2J16wP9czOUOQYx+N\ntXFuJvEN/00047Y00/SQyS06ZtnS8sx/hJMRbYKLYOlpUO9nYmc8raPTgfxX\n7A6HC/b0HAV40uNhCJy61l97pIULOYdVNkisVgaz96kP00uXMnPrs1LCghil\nATd4OLJa+QD1CfyYh3mtKKA7zoqtEiI3to2qYVGidbRG1cCpwITk2gwVFDs6\nJ+nAWl9O8Js7ljwIYQFY+Zc15YzAXOJGHuTSispIP06xFRA3xHNvOG0nKzoB\nKkvT6ShwGHWQ+zOiuRq0VCnsTdb200zuAOuXjt/pP/XmPB84l06K6/10Icpr\n2pDT0rqEyzIIdjVwYgie+EeQvyeRlUlBD8MxruFyHQchPFZKHQkPhujX/hAd\nesnBPtPz2pzzYnj+QJJUOEgihyPdsG3JQ8vJGPGwllegnea+lNv4KTotV71B\nV7bciYaWtwfuW3u6z+Uau3zkmwH1fubfAlMJYP7mHQ7vJMW+5vHM0GfuesZb\nlH8nH4WUaB3TNuowWRScHK1EbbnozGUqdjvrj53Dr+aiDEM0PgCYQJB8fQnV\n5DT96L92QpoupbwQGACcbumWV3lfEI67LO5GFf0PtxdzWHIOrNr9TjWknbZ3\nU63+PJcFGBwr35mGvr3IDAKqZJM102cos6/42RCoifn68yy1M4nl5nhyFNq/\n4Z38\r\n=Te5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuiA50IDLEVaYFnT55R57azSdQ0iD/LZ4OX7NHqrCbKQIgInAgvrtbHFOeQ3MJZsAeBZ9Zf73at7NWLi+wlZE2/XQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2e26e137.0_1609872551285_0.044176707228673395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.9009f6c1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/ripple":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UzOGQPkpcE6J6nD7M96URc6puc+eGc70mirBJSk0m1LSaQPpPicZTmNPbVMo4l0JKfrVYP0AIUGsYT1OtD7KBg==","shasum":"88907fcac6324ad006aa10624c0f1347bfa7c12f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.9009f6c1.0.tgz","fileCount":23,"unpackedSize":80558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhTCRA9TVsSAnZWagAAoLoP/0GjD9kyIr981BDummdu\n3pXj77IFQD5DenXwWKUGhIV5xENllS3BPMPpX6doI9+ztPwk7woHw5P7kWy2\nTkB2KluD7i9v74yJvMajHF+O0ST4MkxSTsMeBWn80wNXeUHhyqCFEVTLIzeU\nDAaSrFxN8gZuYfAXTgRMhBzfdSI8OfkGgC3mEv8X01B6zxKOeIcBgQwKUQg4\nY2xWn/2aK9uSOezrlTlJ9WdkTD+hDQsGL91eRLoGbOQsAWn8gePKMJXRf4hQ\nKfXDhJJIc9X0Hqhl77QXtU1EeztHKEEv15y07PrRIP9NvxMvh9MRPb0bpLJI\nG1lElNP83MXEG4Df4ecIMYdgWSOU54tUmq/IzhwCi3UegBz+zfcX2fVLzMkL\n06E0WgFpjVa1oLCiZcJRgmtGCdD6rZsXYgI/FRZw/q6wrS7aOqFLYLBowzeC\nelx62gTwj9CYByk5YXdulLKL6qXZrEvWhhiGGbB7Q/ZKQbtPCNVy84WNS6N7\n5ozg+kvcMzP1XFx/ApIqkVga7PQ5a6Vhq0srpEi2kIjYfjhP7UDd80eSFe+u\n/KsaaSaxSNLwwebteVcH8VVr7fO0CGuEZ+mglYynnmZWBnARxaVrcea2oNX6\n7ciHxGIPRJEetdzIvw8KW7l6bu9avJNEh6dQrjKfpyL1EaM4PJd5jqLNvljK\n8Myx\r\n=mCOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzEknWocYwxDzpGEQQR8zFDSDlX+gj+GneDBanZZIYSAIgERVkOW/UZiTijm8ZQIHRzGwF3AMyu0/sWS4fjBmtnGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.9009f6c1.0_1610135635132_0.47947251903399235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.ee99b646.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/ripple":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-z+mvWL43aGUS0RAuQHSRFzOnfxUMZSgtCOg7wpFmTql9Ohv4lU1fZIUKDS+QEzJa1fi6qsskZvlDMF79m1EUsQ==","shasum":"1346e175de2f3a0ed3e25fab51d34ba39c8c09e6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.ee99b646.0.tgz","fileCount":23,"unpackedSize":80558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/No+CRA9TVsSAnZWagAAzNQQAJrm07BmE0oVZuDHv4Ye\n+3k4dTM0zVklk8XVzFL3qd60Tk+Oev7lUh9YelhGjM/x0JsMtruBwj7LXkFb\nzboaPr8wVspBztfyPzZhIX0i1junjWmZkkjPkQtxZBJjv5329OedjnrP7Z/D\ns2hbFJgf5PB++HPtPE/Ci7cUAClvdcfXMO7MyGhn2hLXmP6WX9V9bsocvzVb\nwBqdjGoiohw4pQ001+GDLWMv/+8EiY/CuUemakIhvev2rabju1tiDbNgxhf0\nxLwOedgn+02AKdmNoo56ITCHX4ny/Il7xNRDp7AZIBdQlmi5v+xKpDxXYvfW\nMe8jvtNHv6/9a7SFRWgebpOliKwgqzGRTeN8A6/cj24zBs6ahEdE1WpAgt7K\nBKxZGkU7Cm1n0ZeXE591K4imRIhFKqLBKxANK1Et2UQDJvpxr3T2vklXr/RD\npwokR8Gu7HX/KUo2pSka8wHg0msY+1tVOdHnnglvETqTyLKL+qSiA6VzIDwL\np7sEDUa3N+h9EG9izk4KTSlJxmBMKqraTnH5XsaEpmGECYc1HIpze2TjY2Cv\ni+EFrQ+coI1C517Hv5xi9N/tqswqwTVUr6bNM7c2R1XCt1+sIZdKtGeiC7d/\nYDbDeCf001SIU+O1QDkg2DQsRdVnAPQ0ftWhcvrtuEtTjLvP28NvXehF2nq2\nNkoW\r\n=h4FC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/+jo8QBA9QPU1kkk9qoJgQ6B91Rzd/jPSy4JQMTK/nAIhAJHZ9fI6zp9BpFhm2kVOMTwD92cm3HHBFhv4JiR86kis"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.ee99b646.0_1610406461654_0.16706541096397354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.740ed33b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NkNLFFxwMAUgmDOE2Ta6laYTr4B9D0Xle8o8poRLl5GSFxpAikjO+cggKrHgmIWp8jyMZKi3bhuk0GlXKwxK0A==","shasum":"fcec5d00bc1436607443fccdb35311e8a145e343","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.740ed33b.0.tgz","fileCount":23,"unpackedSize":80558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eR9CRA9TVsSAnZWagAAQD0P/iTImsbL8ziCpHicL8wm\noeNHPAERJcO6FPM9s6j+pVAlrUx1KwLhCA+fxOFtGiPkMiUAs3jXwnBnnAUC\nQi2LzPdVUVEWJaSgOwFT+LRbakGCrpgrPIxzQ2BfZ6pupCazd9NEuxt/KHfd\nNmbB35qJssiOddRSj7cjfbAvcvclMSTZoySYpRm2zHRR12YyVfrB/URVhHdV\nWA5pvmojr0zOYnfV7KhFotE6nazHP9T+PmQ/gkr6WlEc5d5hDPQr3tUMjlLe\ntUEy9/tGqaVWNuOIndlB4Qh+6TCpWBZ5bTw/P7oT/82L1u737U9XIrY46Uvf\nMNSh6knetVbAJhVat61JnaILd0eedA/GERZKE6uXVUYau+reB2c8v5SoiqhT\nngTh20MP/avlSEsGsG6cw44t9mwtSXgP+dqNyJaQCp7N1Zz9TscJ84uDeE22\ngYD7vVLd2bGYYDJa+XGTxmqcSblcnkMnvk1wyQTHhR9zmrC3urWZ2V8o28ws\nZ6pHfUcQiT2tVo0Km/vqi9GDWh2uEjLIm5mxdtAKmjGjHJIthegycpMpf1v4\nuxRvWCzQZA6XAl/XdmcYwK6S/aU79GD1jt+/AYY/2VAYIsboGp0iVKLovLgg\npYB5PxMfngpOoJgdrlnDRdLq/029v29O7IRxDSK3H2vYjmxCHThV6Gt/nOHl\nOane\r\n=O35k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZj7cJPtR1kGz3+yJmHkQSN90K8hQPXfrr9F58Na1uYAiBKl8XgHOHe8IL3ijGSNmla78mjwfAxbb+PZcMIS8VAAQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.740ed33b.0_1610474621077_0.42294235013768033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c5c541b1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yhDvLXUDuYzlevvJ3rM2a46FcdCD2OUTwnDwPz8j4QbBLweWuD10nDCjO25EMNNOsn4MRxyrIbi10ydNJF/8fw==","shasum":"570ac353790c3fa35c913eb2a09cc38f10773126","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c5c541b1.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e41CRA9TVsSAnZWagAAkvIQAI9gQWXFz2N2c7Kge8Qb\nygMQBBxoumOG2GLdGcyxY2Ox0svITeCuyGUPDiOwqmIK/dAL7k1cn1MLWaD0\neJxtUZXfg0dskitMylP8O53dCCifZDgHK4GGXJHEnbVzXu7nqRXVEFAngsBL\n+JywXI0W6Zb2X9ekHECiCys9tZ3RBOVv+f4QZ+zteKKfsCEiljpSdydHeNPz\n/12lcRMp+Q6qRqE0Oovnm2p7uDVDmcmC7X7r0usiTXSx0XX9pYTvvg56mADD\nNTENnc0ZoLKqw+1dL5sG3IUVulPG/1PZRiQ8RlwHEjXP6XT36Cv3aMa4a3iu\nbPN+gIJRJQbryDyoEsEOZbptDOx0aEnk9qrNT04BISaNlIX5JuoSgiw5rYu4\nhWFyeZEtVk5KjjNgII1PCFb7rFgrwKPlpWnr5OSdfYHp5KM9op/up+8yUI5U\nhoqqxCThwGa4ZJNUj8G07DsVtSXqtDe3u186dDAMLA9jrwrw9b9Y3j6AmR0f\nQ0fW4U8D/ZIrEVFctPHq1kJynYbp4CwXMtp1kYTSxcITUhfJztrEiItY/rb3\nwo77eNlixqcZHJEiL2Sf0f0pDMnPDBBSkZg/spL81ai0BK4mIdgoP5tVbBcr\nyl7vz3WqhdlKbNVrWiW+9PJhoobl8xRf0kBkQC9e7W0k3SoA9tmoadzUNwrD\nMUXe\r\n=Kgv/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwUBI5IwrMIQeFofQh9fdYABKu1V6nBep1lo62dfTXqAiAKzKrv0EXd/UKA70dMNgi42c5h6yyp5An8uRdbzdmf3g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c5c541b1.0_1610477108509_0.012395520218330569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.06fe9d90.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3YLVL0WQcY9I4mRyfZWo1JMlaWsBlw7YGoq4iHmyMJPcM90GtYHjrbVum5rlqUqU5Xgtb0PX+p1nJ7j/YO2wkw==","shasum":"bf5fc13a45ec4eab2b92641b93175247b0f751fe","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.06fe9d90.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyNCRA9TVsSAnZWagAAEm8QAJtMRSLmxNT9XZVc3MK+\nvF3TrO3EZUCDAT057gyaUwhlj+gTuF9Pde71Cj1UQdO93H/Gx+6HxFmh+kne\ncx9t1aUPz/0bJ7dqpAy8nVqna8yQZSaYY9kAfA7WxSMJm+d9DSP0Zi/WdTNA\n1lg2+VweFylh2/Xv1wzl7f0LFtL6eSj1jVpKu+8hxbLqio+mV9B3pDkFmTDC\nmvR1M+9IOTNLBAqVLu5yKOY44PB3ds2/9b6SwlyaV1o7+H/zSr5cSYhGf1v0\n4eh0PY7lrCDeulAvyVNqaUf32EVNkB9PE2cEkxttWAdzd24QxXjqBbpgQ7se\ndEGHYxmjaMbrTmzvTqpUIZbJdSyNur3jLzL+OvdREcYouGFtS6wNtkXe2xJe\nYuEiOkOCNi1bGTgQF9k+Wux/AhTK4+omqaRl+0rGrEtdLZKEfjiKryEMw9p1\nnC16y3priwb5Cp+6jGWNBMAGtVK44R/up0Rc2yzd3CLbotfpa2iikqULGI/v\nx2DImT8nFgemqq8cFxNJ6o0xpn1H7t+F1JduO4yfL3lkOWV+Encr3dHzrdrc\ngYQ3BpPh4KPPl4rfAnabRNsS1XAiy77k7ysei1PrVhyCDrPmvYdL8vLkbGnq\nv8wwEQBTO+Wk+hAwBaq8FlqAe+nI29RzC8fIP4vOPEN3QB9eq8SafVwA9XEs\n8ZvR\r\n=oOzR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUfQfr9nOf8poR9Zz4oObrp/TUHdc39LXjb4IgxmVySAiEAvuZb06OvYRkwan3fDYJmThlFrQV99IHhbF667CEEVfU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.06fe9d90.0_1610484877159_0.8266508145291049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.269eed01.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MtPpBL0ntX/lg1oeSq7bmWTVCePDMyaEA13v7sVFrxQf2R2NsrL3pesipXg92ebj+vp3brAM7iqJUCfeZQOZjg==","shasum":"c3cda80225642ac2a27c7195db6e52f59069e867","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.269eed01.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nTCRA9TVsSAnZWagAA1nsP/1TeWLVGeOWmnBVVoLht\nEP0oVS6WZELRqUUXkWyMeixvrPvNgLwW9uQwQTB1Ac2hiqBZA3YwvAL5BJRV\n1zp4eynv31kQZJQSekG0Jk31rj6DPUL+/e6aqGUJICoPLvB7GgySIMvGeAYt\nz40Ulm2yoAbK7IKbxhKcq14j4UHO59qrXX0sho4uarchbwR3opFH5zL5cTrZ\n9UFPdCwfdn4XsVWfTs8trmxf0nCO4/lP/a+4A7idFwmv64Owqt4I2b4DW0R4\nqT/J13yK6+wGuLPLuLraU9hWadFU/XpjTDLhYk8VLetvyvXmwJRP5DDTrsCk\nA5AC2w9knugI8/uP9KPUFIBf30ahR7mz+gMru3C8JO8ViibSq2yGuFccUGtG\nLI27Gc2c6CbfuSadFvyNSpPHe906Ggthf7q3/KTch7XaqJ9iqdDQoyHPVYa2\nvzjSQFMR51krUPwsECZETdPUUk01zwAx8tdIzBU+UYqlB/gz4pbSAKWNAr9B\n8e0PoCbZ4VqOPOEEE753i5pFv2DoHoIenGcnwnDgJDbYSNOfPexTv/0KVdSO\npSNiqCxYne5bJK1E3fTkdvuM7Z905r9OJlFcFQQ4Py3JsM4AF3z+ZB+HV4TK\nDFLsbF4WZk/x+/g/6IGYlkXfq0tv8CKNQST+SL8xHZR1Jar+82HSk0gdkZS/\nXsld\r\n=WFEv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLFfBLGTN+6sVpS9MLsEqCqDTypSV9eDAxqjEScIqwmAiAbNS8iW3MNGhztbFBC+X82l6ITn+oJub151XbiopP38w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.269eed01.0_1610574291319_0.45777436729423826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.8c075f35.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DTnJtDYFDXIEhuGTh4oAn53sBfpqERnruteM9uAOmYfhXMZ5uUbgw4zXLQxKkRFgmwmwkk0wPuCHeDgWHm9FOA==","shasum":"074ffbca4d161d20c08d5a9c921230cef7e96d64","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.8c075f35.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3zzCRA9TVsSAnZWagAAYr4P/2DFiBx73MBgUc7tLAwk\nlqTgVb0F2s3o7JdgOr2uHvvfmz2JY361GVoKa929R6SJmXqx0GaFyAGBSe41\nba2/VTdT6QPGjrZfcPexboQRjF/ml6wpTf6ZAC8+GS32KmXJrnP95bPL6jOr\nZyGlProLoySAb20ajD3MBBnylVWgj35fvmEvYRbEbci1igN0q9RWyzKBVf8X\nXULKtqwLGiReD11JiWBJbyO8PA/S3bRlvBZgx9DGpKI8vtWN5TBP++JjQRvF\nQb9lPd8mXN6PGw+F8eQsczF1EgG7IGG3AlfKGfOAVGebP9zGANZj68PberB8\nHgtbFrP0/CXGNyj3T1q5f62psr/vD+GsVSa1q5lEqjHjvtaPFwkoY9wbT0DR\nGhxCyYTD+5vqHTRCI+07RlGADrxxOsB/LZij9tyrzJD4mYkkrEZocpx5A70Y\nkbkw+9bdltgpbdbH+DCJZV3EbT9M/QsDZxtAhQORgvtTuJaEi+TnBAZtGKKx\nZw0S2Yvyuwdl1pYo2AXFluXKMH4Op3PVz1iOHQufZxoZBi+lGwBerRU+bo6O\niI+x/Iwar6eFnhvt7wTvbxnCndzytAmHaa2fzX7r6tWPc2095xzA0HPuzV6K\nYdSWVN+MBsu84EYesCNIojbY5JZcuKj+G7TGZ7XjcML9QZLDXh29xNi45VQT\nQ9Eo\r\n=vsk7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMNdi/7Pm2ndsHs07uE/eqF6jB6JjIPm+1mgx5u/GVjAIhAIfvVHvaUmhOsJOR3aK/D9+YjFcRcsPVUV/5+bOSA6Tq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.8c075f35.0_1610579186998_0.4207612883527916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.3cda381b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-klGuBhFtK9VV/Exx4eygsxbXP0JX/+vmNczPfpQS+zB5kAnHXh2WmHDWLcsqA4F3IqaSLwCH63qUWdf+VyNjbA==","shasum":"94c2d65e70b17c4f542e615b1012bd7eb7076645","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.3cda381b.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4p5CRA9TVsSAnZWagAAu0gP/2Cxu6XtaGJps1KJ5Y23\nrELYpiFGIf6LYcc9xIHwOFbnJPdZjDTdLAlY87Ano2AcVY9csBFdfOOK5wpr\nWuqEPZhl6Mi76U8ZwfPV9g+Odb7ztSutRXrMwjAqMtQGhiFNIR91nNN3A6qY\nrLzRqSsDls84SIsw9oJjvByffWqo7j1qF5KE0XS6Y0rqaUXyDwr7vvfonlaS\npjU7dzgGD3VuwsfLNx/XtTE4L3E9M28vaWsbtqEXHayLcLnENCEBq9f2uUZT\nSI0Y5qRYhCrXmQDlg8pgCIA+X6cB2MNYHV3etfsxsDHI69oiEIqjMmLMop8A\nof+A1v2QGFKwLV1Cno4jeevvL7C1rPBSzWURCVbGxicy4CABW1HomZRMNL1P\nPlnEdLhVq217ILXHNq5s/Tc5oweEU0xGaQgUTE/2CQkVIgXzIhKu2O/9gTxX\nRjUTuhZTvKBtdiDpZ12FWpmsAEuW+NLoBWg+IHngZQtge4TJv/fOApDmadRv\nsd7T8Lpj8PQQQ1tHL/F9WlP5Rk0zT4WPPu4LYLWQOJ4Xv+NDBqR2RdSI/XTD\nuoF3ED17dKtV0sGNTGweaIw6iHgtz5lcRO4zR1caZYz0cWPH6NEM0pqWpCX4\nfl/1zkt7nkuQI7g14YZ3bfiU/7N1/0k/xu3P4VPHbNBlFkPDgRz2R//jQWDT\nKAvS\r\n=DFuS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPI94UrbTzr2oH5EDv/EhFw9huIrzVHWNXfUlNfHyRKAiBpDBan20ydBEmKorOfIZxi0eAPOu8uD2dXlfvje7wfzQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.3cda381b.0_1610582648694_0.1618246080873853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.bc113605.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/ripple":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2R/laxhKnXV37SSurXKdjZdbb7Lve0OgaQCVtcyLDgiyIcrBPS7BdFfwt6FO0zH4+V+k89mmGll1fCoVa9k56A==","shasum":"4d378a78bab0e692ebc4a6774b7525a9483983b8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.bc113605.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QHCRA9TVsSAnZWagAAeBwP/38uY6/snUj/YtoEiAIM\nDERBvCjyPdmxRmBiZ4cRp32VdDWl3An+abv32ExQi00pDfmI+4Hf/in+kppB\njhbIPy+vmD+cDZtTF0Spc+64dVzSywdd4jr/eY0Rojd2k0O+U/vXxx/y0Hia\nlqupZq4f+EbFFf3HqSBdPTqBjfyf+gmFwHUQzqT8U6l9aCAKHSwlpjgW1/0K\nim+8oYh0KQlj1WN97Xn0AkCWr22PBBPKioRwDgwPyqBe/BV/UtL1yEdC5w3p\nc8EIin95nnz9A4Jc8HuARx7ZkUfuf3FcOCPgxUp8nUSxu11CnUrVWh3LmU5p\nPXZMYr44neDcWY4YTE4yBUoyG4PBpzAvLDOZIpmuj/9ma8CIRplBBqA6/xc3\n8O1DTkvSEw3f44jbbbGCra3jTFFUsQZmPr3KhQw0ZZc7G7TP3uCPJDn/PuY4\niVGXRixRg/mREzpCgpgX7YrrDEfrqEsJye/+xghIfqc08QFqLqtwqF2n7V4H\n6+IQF5htkyZ0OfvoTp7KfVWqTrc/yEsBC07vgh1rNensqFsexLdnT8G18ufG\nxJu8WFu/JblmjyQGJpI3giajGl3Rl5FFag0wYd6rANppVaSqqhGd0gDnUpX6\nHHk+NjikJBTiklGS0MS3kpSEHfBTKUI8wYBKVFsl1nbqxQmHVsyWGp+A8Iwq\nihO8\r\n=K6im\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmwxpm9uADy7aIOXvoj3+5llNYc6u8T7bhfJ+9Znv+fAiEAzHTUScmUkVobyxiF/9LJmhz7pFMU2I8x6B5heJAuXSg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.bc113605.0_1610585095453_0.7069148131470122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/ripple":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Uz/1yGysLl+R4AGBH6fzppoVhQEBziNDuDt1r5oHWf4KksGuBYv2bzduF0ehm6opC1IkDIXOS7r0CuEI3rhp6Q==","shasum":"8dca7e190fc042d00c307e1fc7b6eac62d3672cb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZUCRA9TVsSAnZWagAA5JgP/1rWwVsUBvsqYHNbvWiJ\nZ/QwFLEogKGxD/Wg2sU+9W7Cs7JLOZnynO/d7T4u5LfNMPncJuBu+sZymElK\nKR3PuAMHFLj6T4QUwJohm2xhI4vNFUuREXUsQloMzbGgIe59aRCgaxeA4LCN\nEiItM3ODiKhjrSVonNuWXsPHsmvxK3mzXuy++seZC17YxZuBUwlvt/GpMOZN\nt6XQqSMNxNU17Y3R57+rcEWV3ff++/vLjXW4OANuDAKGfxiUOSW49QjYK1/l\nYgSkeHAiPVWVJzOC7HDEvBYb2lRTo6X017M4wgGpoWOxT2mHA9WGz9qjHCJW\nq1lx4uufMge+DxN1E/Am2QlLRwugqaASIVZKRWnwXYW8HsMt3SjR8nRbXAhG\ntvBcD+OLsVXKiApVwSynORAwoeihdFteU26XcoZfdhuVaD+Ii2GCkKWwrbRJ\nsl34LlvplHQOzDrtV1ZM8mzMatbL7aJj6Ryn182YjctEjU7pmM/KS52p8z1o\nmwVdLmAS1nWDS9OU1OR9yYbcDmhtNDauZWs7hWY6+R63bn8fBz+NfQd22ipJ\nVjlQ3nx0WnZbQ9FiK3D4BgEkr60h2zol1eB55f6gfm4D6/dp/E9j0PivpTMI\naQt00BpaPqHtDazTcAgX12q7IxElwehQpNkRuHdNRTjHVv65AGhc8oaX1KDf\nyDDG\r\n=ECDy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCldrE2shMbsSvwUiPA48PA4SGRuO1uoa3DzKIBCzS8fgIgCWJrquI0yM/dyc+KFgstJ0LaPxrrFk0MK5Nx0IOTzoU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0c1d6ff9.0_1610741331833_0.009827334921857833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b4332e00.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-iEPh6mO9V2S03qA04pi4UWiP0OXKH6r4bfeMz4d/0H/jy6rcW3q9SAmlOfeim1FYvhDNbhrPCeLAbuxRoe6wpQ==","shasum":"ac1ef3895f0aa4b301186b1a58801b1c547426c9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b4332e00.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhILCRA9TVsSAnZWagAAJ6gP/iIeoYetR6niCHyPpy+c\nt1BM705RdTlh0pYXdHtc0DalBlUnqV55je0MdpFI38DrdlN09G818Ttv7lcj\nN7QJUeyEN8SmR0mOXFRfgvqFui7tbGC39m2f4/C7Ag6Vg1lVlNSnfiKeqJt8\nCFXVrmTrddnW0wQ4pLBG6IF67me1uykj6ZkU9KNvbrVwpbkdBJOWHJT81OX/\nrsA9VOt4XZqP+XUMzPLtMul+pym7reZsHHOtvBB2OIOJ9ucS6ZFCZkTJQvfD\naEZkufi5Nqy3qJQDOLt7Mds4QVb/DG9qaK/9/C/rcU8deOowc+JG8uL4GTN9\nOoixE0y3AbXbI+hRX9H6ZYGgaFpXWbuir9jHR4zZ0Od3nuSsjZnHL1ZTUXE5\nYRvn4mMmS4Ow2TsNYkqF4kSZrq0kQHoqqMcOzGR+V8Eml/BQAQbKt8Ipn6uO\n8xObmFptwVK+/ft/z/3rmlGk8KwsFw5iMNTCHetY9dBZ7jo2eD1Cfk9VH1/r\no5O5h2QBoAgsbLwdVx3L+Jt/hze2bh9xHoTvGG5YyvSgqzSw0uNkXAKh01ge\nOowAQx744XSv/EWDlY+BvEkX3Pfa4z6Uo13eg6LglDAbcy0S9IMNvsmfaHV/\nVr+Uk2actWCkdNOskrXy9Ys4S8N6OaIJ9caFC7zDlxBEa7rW+Sv/YSuu9pZf\nussG\r\n=nQ4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERzUNcPoHgsb0vRN0UcuOW+ldDuQrci/gh8jNPEgMddAiAQqg7Eu1h+nD07TYRK++zYIEvXobsst/lvpxlCF4X6Cw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b4332e00.0_1610748427372_0.8700946387651549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2899691d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Gn0X+SqC3RAFCQT6E541k5ABshTU+cMSEAwvZVprG5saia3E+PMirRI69tOJQoPAW6uynHM2D8opooZpNK/WOA==","shasum":"251f18d548c9d7edafa68673c84f24ea0b84b43e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2899691d.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTqCRA9TVsSAnZWagAAI5sQAJdBi47Z5wQbIch+PNMz\naImiCC4O+01OMeGDQugnMJXFz+sjEXEzPcTr3KqL7PVdMkFSvKxrj+TCp3rB\n4fH81HvzrSVDsPvFM6iscySHrUyU3W3lQ6Y6eZHe2caDqd1s06PpUcJP5EKI\nHMQSZlgSUuJpIfMhtN22R0fgOJc4UV0YJezt64+oAhOkC/uQ4TTsP8BeuXtE\nDbFbOCSFMw1QwZtwkohLkx/+UYWV5btXV72v1IS5hSIscWI9xOVJ+RAr3JxY\nBINHM/TpnvPfqHt56ZmLeICoU9SO/g1+SWJYueZiVaBTblvzam63GrDetov4\nYkKXRP9NwUFA7gSZNs/dhrIgiGvZ2VFYOfL9CJH3IzlHAnBeSYYiHlUm666B\nH2VQyFvJDMb5Y/6BZYIVvafAw4Z42HYX+gSwgtdKSmmnZfI3SPkKMxtLmpSL\n67pV72xJyzTjB19avdBBfuOqc9ABtnRsrlujZUBXnctV8eKQ5FP5EtO2KUfB\nNzEG2Fl0lF82wYuXR+ZZ86LZDfonYE4C1swdIl/tn4cS3CNn8vMqJHP49dxH\nprrESXnJBgVm+yUl5xzsQ4naR7FPyP1f+yrcpDXn3v29dCcqx1/hBZ0M3gP0\nsgeDBV97DB9Nbpz6oU2W1+06clI5STZMNHE9mk8Ojcjl9aOSzjvALTKuZxlM\ny+pi\r\n=xDjO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5dC4/PjO9izqvvrkyMoF8kNIjhm4idc/H1FSSn34YWwIhAM7OJvqxckT1tb1toFTWlsRiGkikxGBypQOAZbKWvxNa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2899691d.0_1610761450319_0.3566096106241796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.fe73953b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-I4uh3NJM1euux7mNy5gBPtnM3sRgheqceWjXST/+3FDwa4mLM4CZ4nDDdNLSMQ7BQ+bVpevK9n2MpnrrH5VNUQ==","shasum":"6515dbfdbfd8a58a2ac75717538ce74d3ae514c6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.fe73953b.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEaCRA9TVsSAnZWagAAiXsQAJv9C7lEl070rGtpX7Hl\n55DJ1EjHHqLcos8/mao29Mju2CSSUN0Qb8OG110PojBXr66zDt3KdVOEOlfO\nZVgLMofk2uln8szrLz2/ZSA+WRi0pLIf3Vt3vqVRGz8KROaxsD1fbZcL8oYq\n8nBMiDRCIk7rWF9YwxgxGAJCRcY9+tntrLhNVhxCqctB0/tY0OXDGmuXNLbf\nRxEke+5wMUBQxJ2SYeCUyK1KNwz4Mpb0jqN/dh+HfCtGEkKtvgPkr/zXOQkx\nWIq0vSqdZrW14ER71x2hKjovJIEK960M7x5i755r7/Dr5bdfI/n/KKoQhzJW\ngSPa+b6ImZouqFKABCQcfmoP2DAxYrEetcdocOLua1J0Ohi2QCLvasqNaeNq\nb9ifCxOycBayjuGyHaAXMNb6Av1IszzWqnyw7u/vt9kUg+whNVTfQvArtMej\nsslR1zemSNOfNS4WMglTtgyvPfwAlypyHrBLGZ5fDvYQ4aiaQNNSPSS2YVnu\ndwFDVqyn12+MFXaowAmHl8SwA7RvYzwO/tuZ3+EbT9MBhg8uMrypJYBJJrxk\n3y/G87BuIo8+T6fsgIMHJ4LNaRlpK58dv+jwd+tjgIe5PcSByKcgWyVoOwZF\ny64A35XmDW5uKRJxmB6j+DpacDV0P17dfGOCF9omStWKKn2azg5bWHk1kFm0\ntn44\r\n=1Fp2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbQ9JxVT9e4uYFeR+7nFrPbukXBzxtyEbThErrfDvlqAiAKbXWPToA5y54UgCe8MfOxmTJtsXnKD3DwdHXchHEiYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.fe73953b.0_1611084058475_0.2377173595495672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.d3a16455.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-gxv2/LdUgR6IrCdeZd+N5T7aPQTQKTKLz/7veFxoYSF2mZjJXfYCChhD18oOr4JjNOZFKmQSnl709z2pSHX+cg==","shasum":"a084847a5ff8a649e00ba2176af6aa4301dd0fe1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.d3a16455.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhZCRA9TVsSAnZWagAAPjcP/0WQgT+D4YsE6pTPO4QI\nV2Dmi4KEJ7CMQoVPkGBchApuVo5zI0WZRu/F8DD19LW/M5F+ddRFh8YdnKxK\niMbUi8JV7iGvYb02t0lkgNdH/ZP1llpkRPGilo/iZLi2FZaC49lbvi17aJvN\nv3bNrFM/DBZLSVx+HUGQM8FYiYkI3v60K/IVN4Mm8QC4CuXowo6ZInGd38NI\nvmWrj6QK5/FdhVUdjaBOOYxnbX2mPFnOi2KPFGZH4JsKIHQaGm6VckeVyxar\nYYFaNozAOtJmDt6vJH2nnwyORhEdE/KAwOGT2BjbvFbwkQm8mAg7b/JuKy03\nV6UdfzwlPfOIBfvfgHooP92ZRDBQHddGdPA2AJv8MOiXeAnvpX1Asw7yzDxT\ntrH6BKDLPuITLjMvZMQZIuio4yF+/aGZAb2uBqDs3c+Q86748sfP6V5ooVIY\nbKr5EmlAjzGFOfQI3jtOTYbGjhwEisSm27OEniEbJPEfmGmNGX3amr5QKCjI\nGYBOm2VO0iTd2+LCh7xzhhTK7BeMsDw00KexlHfmUzAC9PL+yFOZKmGfN6TM\nXx6VYt7b5GcjLCz3vVhJAvDltTuzrV1X93I14sTgBR+pA4BbE9/Als4o+Lc3\ng5JfJcXpprv0QW0/1gxXmnV3i49lHWB+1itKBNHRu5c4wKOWJTaFewb4y/lJ\nKmhT\r\n=1y4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuVeNiistrtetIQ7YEZDaJnVf8h5kPMtiAq9qH6vsfZAiAZix7c1IdYDmMaeF5/Zxg3usdw8bcoKurrQserGm0mQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.d3a16455.0_1611085912990_0.8766137873079611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.597ca1b6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4LBQ6wFlaY9bwkgRa7vGz+PeSz/vEcF2A21NqdcfiX+U4ns8dT6GX9bPY3X2PiH/sCG4sqg5UjeikQt4zfF5Sg==","shasum":"c48e00bd9dcc600df110cfaa2c1159a06c0c0db0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.597ca1b6.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4BvCRA9TVsSAnZWagAAr/oQAJt1xxk6lFoujmrQsRsC\nZtbj+dp+NgwiPuUc494NGlDzWHXTNNX0U9WeMOM72YY6gUwD2bgVcpNrbCnh\nu0NkEQvAbeK4+1BroZfp+kAolsfBBKev+E/Q3c/RQkzy1JbSAU/l9BGRBWjG\n4fmW+ydpgl/NXaK2Cf2bHYQBPubbf1F4B1ll5i4Gh9EcVkcy+I4x9bVMeavf\nOIOGRZ9/l8mGWPCGeqgPM6sudld9IllIz9ccc//HmvzXgIsXCeBAFFb7dCEg\nV0yJZLElIj5OGMIZq0/hkeJpo+YNPvNWgWfGBvzjSDFozCJg4LcM+XA7nAGv\naRFGXaceK7TxJfMl0xgxs/m9fEydfleAtQNwyFGWVdw83xSkwKmY1uRHxLP1\n+twmoWucIehz3qTF/wa7vKvROn+7OOy9gcIRE3eK0Q/9fbUqOqT76yEFA/V7\n+kauJiHtudFrRQLhUIGlef9rmoUI2Wndiac5TNgK8BkqS4WFLkcxnesje4N0\nQVKx5DvODxBfPqQSs/VIW1XALYPltRz1np9Hcs4jXy1qtdtnL071ql83RXQW\npBefUZhNHtluSncsxi7vl8Pp9bAqtTEsRtqwcEXQXDMr+SrXQNXD2b7abwN3\n/oSeqm/MwcbkPNu6SJoHRF1LHrRD6lCHt7Duy3fUlZYS/tiYZGerm+ryCXxH\nsdbn\r\n=21uW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSxVTIAqaqJdU0O3X/lUOB6aXQClHlkw9E18lq9qIkdAIgDLhtXGfx6V0wh+mxtai2wP/uI0AOjujDX649mldiO5I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.597ca1b6.0_1611104367109_0.4170503138720618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.3c195efe.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-4es6YmdQluAahySt2Slf4dc8RXt6ssKlhj44voz5Sym91f3BTCYe9z4rDb3+QqxZGMAlucWDc7O2yTN40Wb0IQ==","shasum":"f4ef501005397165624e06f84dd0997d18256e52","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.3c195efe.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47hCRA9TVsSAnZWagAASOcQAKA5u4fbeqCaCzANFRFV\nR4Q9jcImO0qd/1g/4juVN/hr3wpu/g+5j3Xa0SaFXs3c9gRuOoCRm6vEAgA5\nslF5V6THaTlEXsE4J7oZxCQbDtLxeMkjqJIauMu0PZ5hZoT6TR+9lsC6vn4P\nkb0yrcdGVhz3Ce2daWFDJVCwTYaCJdV6cUMT087gLEc8lDfu/gWdomQoOE/p\nS5jIjsDLKsET6t5lq/RLRudMnztv9VOSauhYvwN/NIsk+kp820ma18j9UqJy\nGDCB21kp+gIHnlv89ZbnoLxd17C7r8E5uSvrr5zTIujCr6Fjpec88/k66CG6\nBsvkypQqXSDH03odvTvy191zZMFmI7OGcFoxEzxtEect2rJxGux3B2Nc5kIq\nGnY6xOw19+yZM83l/M+A/TDhT373312P+JoPqoCg81zQn0P2NfRsj/nY8tU6\nKEyzjPkMcrN7gJTXc9j8GyWFDqe6YGdBp5r1Lkb6ggyjTJFgdxmm0+27QFaJ\nPP+JAIrK0xgzjE1ilyW1RjXIRlB6GjCrYNQsm41YaCoezydUY/zO5cr3QscY\nf42GdGTQXhs/2kiKvPMfeB6DcWREjRZnc2ubS4E09Oat6QfPJO5OwUriGrna\n3kza3WSXfchrHu4uPQvjbDJvXVK+OeXapaCk+ugfG754oEu1l63CEEvFYZYX\nLAJU\r\n=0e0A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIS1pcGWRrbS85mm95YMgySunBltBWfTvHonvNT7ikNQIhAKEm3cl30dnGVDZusCTN8eEtn37EWatSJvue5Zp+x6sn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.3c195efe.0_1611108065206_0.1768927254007775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.f7b8755f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/ripple":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-j2WkyZiVjSjiqQ2qfTfH7xik1IuERo2EkLZLtL9SaTYlcn+LDpi0Ay9yFY0LvapE9cJISoq97x+zvx+Ets1kHw==","shasum":"d8378c39091ba99a6d17efcc1681f046df84fa29","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.f7b8755f.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJR7CRA9TVsSAnZWagAAl90P/2ql0w7DYOu8xa9sTm3N\nqGmuGAONE3O1nfH8EkfhdppeMCeYjkTiQLCo3S8oPfvZEkXlbulyIOQsT0dk\nTaGpBW9CtZmuHG8i2x1p6C+B9zDGtwo34IRpn0rPkSGXum5oDNQCNXtRw+OB\nkCHcPoMkjVBYV2xJxMIz9y0E16epmggXkJXi9ZB2zFPBjqXxU0+Lwm1uYP43\nvIWuGEITAJxKHfPyKIxrZfUDEn++SELSQl2NeJzYDWcgsFjb8LjxJgWnMpCN\nY5HO0XcET7Nqi6h3pB8Jkw5k018Anrm/up4hv13zBQh6MmRci2Q9qefyLRhc\nicrptd6EfWWCh3dPqPwWq7a5L9LHZW3l4GaYTv4dz+qZ7gBvNR+mDXmSR0kH\nnnVVk8NTgusI+4KhiNCKK4OJs11byh2dBy70gGC41VCHqM0TZTXyugYU6uUr\ny9SvTM1rgpf7FfVFswHBoqPLsVrdG/FegI3Dvwuy3duMBSiH010N0qNaht0L\ntAN8Jkdgbm2aVvF+Hx96YiZwuw6Ew8fj3M3BhrFl2zEZNAKeeZbk48vvj0Cl\nO5HKnotyhJCMeR/oA7nTsb3r6D5jQxvi+Xsx+9i2EY7+lWRbrHhCvwG4d7Yi\nDdNJ1aax9gLyDWjHS9P9SLmuqjg5a4eihBLwiQ+Lib1WzuDCFE1kZY+nlexz\n4Y4o\r\n=OhN7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID03+Uvk7rWbeZDFj9nMVEKavmbh07PEPkLSaBfh0CtuAiEA8H+LJGuTLriY5MsFc8G0LDeBQbCcG238BMiGK6ht0do="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.f7b8755f.0_1611175034490_0.4930316251960343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.f60de7df.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Svvn6p5rqENBAqFt8wnnC+hpT9pQgib0wPpLa6rjOTSATcynY2I9hZXcqFAUFw1WCY3WxX0zp52hFElKfBimJw==","shasum":"571c20f9972862a929203e35f8237008a29c9bc7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.f60de7df.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL5yCRA9TVsSAnZWagAAuRgQAJphB3XmZjflCaMyUa1G\n9a4anY25kfL56osSSUtkJXxqSEKS5kWoMvlGu+Lkyp6hGNcPCmdVGBi5nmeO\n5CvKhJrXHsSTnUrVaALLp3MnjJ2eIrEctNhPmorf6WL63z6hG5dx+hvUMClC\n0pD+Ew++KkIphroDIYZkGk02n7gRgyn7j4OR83ND7FRyhJBmXrq1ITFECu7k\nyu2ZpTu3WiSuhHgijLBHpEiEqJHVPsRg+oBf7fFTuvj/Rvq/xeLVYS8I1JTs\nyjbTWtri2ZnzDH6WzO8Z7FCsh+20yD7siDaYic8nhV4BfIO9xmhqo4/6UBVr\nDagR5aka3usv8Zaumb0/IgxblGmTcwxrrFmase+Gvudy5JstqDx6QgDsaIif\n4KTS+e+ad6Ti9nLP4SeKrEAfFWbfFTN6G1nz6kZEn118uuaFcN+MP0+Ie80V\nRXXmE5RSHEqhEClzlVkJUVnA1nwgz2oShEP+5klAC80FM1VDnzGY/xNhMx88\nOFSsSpEUh8Gf0GbWwtZ5glriaAfmyFbEU4ZoLHYr1RMtdxw4FoK/HQAsHWRu\nddOtfhDhni7uEBB3YWtR/T7EhxyMdeXAgi7w/vfVVTtYT2NbjQ0nDL8F0Eii\ndnTuiBt+DvtI4SwlaDcjMFPwZw0g9EFyNoAogMAwgwljlITePQc1W3aqTyHD\njENU\r\n=JbL7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEwykLauj61u4OPI28MAIolmlrSUEim8h6hilUthSS2AiEAlmM+6fEQ4f5G2fuJ56iyVQUZbSv79j9Zv5uECXoC/pw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.f60de7df.0_1611185777667_0.5278663544739899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.664a2927.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jPO1ROTA8ZlroJgrQN03jzKkUSZbioTK2l0sddBQIUdzVhPQYe5lZ4UvHh6utlzQmiWjt9kj9qkMfSn5w6FvhQ==","shasum":"db6721d87270e03c58ab71d24a1d0ccae9677ab6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.664a2927.0.tgz","fileCount":19,"unpackedSize":76932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdN0CRA9TVsSAnZWagAAfQcP/0n+e/JMF1UgXGQxovPJ\ngXIDKl/8wbqzSIgAwikjrM7mIbbqax/z90+vCJ/qvS7dBJ5g+ql8+fFRrVp1\nxmKTbuFaFGPQBquhLDzriuuu8QqwNs99c2J97Y6x8xRRZS7GfKJQAzNlaWF6\n8V6gmohvcPm5rztWhey1W1Rok80hCotiSDqB7fBTnJkkpneRMNbCsi29HxqI\n7psvdbAwmWjhK9AqoTI0DVryimK2p60KSQ2JMwlK1Zvb1InGXDytVA7pqBHL\nQOVd5yda4jfBjLZlTms3M2JXwxegYvDv5I19HX9kXUL97iBjd5K9gjUGeXg6\nTxY3na879lDHcvMd1SCkquVq9s5RkMASnjdGVxXvKVDBoptMfb7pYL7TT47a\nsHpVsqhM1ts3f8gCIMLlUp+JE2Vxez3YyGahafck+FSkxS6iN+WeZxMovCYV\no7YyEnB+rMYJnVOPvi+TayqQUZP7ogHfMblw0AwLXQG2To5MbI2YA6OeSuDX\nOafO+raRDW9Zmu5XYzZav+S6+eKfoRRgjZFMdfSWzDv0JgP0L5Hf677UF4o9\nmEX2150PXzmmpHg+MgI7SjEGXB8JagG7U3wlKjjRuGSiknQwVZIoICmz5iNX\nvT+gZunC3+6KHFi+IdTQGdAKfQ5XlZgLUUnqWS6FqjF4lDBkY/Nu4RLK4zpR\nigBK\r\n=qti1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgscMZry2pjjUwZExk7AGnsCp+PT+2nnuuPjNYj9AoEAiAwfRwAKkLV19EKC+1os99psLEJW8B0TAwGpxFkyCT1uQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.664a2927.0_1611256692125_0.1428259384769044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.a6d312e5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/ripple":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UicI3f7Ev6CUsBfGmRkHKIhaQHbrZeqYIGYyo+4ehT2T5neoRx62s+GcwVn580XmZ39sLm3lZAUFivHEAcoCFA==","shasum":"9fc5155ad7bce092d724612046b2db01d1953506","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.a6d312e5.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZeCRA9TVsSAnZWagAA2XgQAKDNdAamIEFvgZiiLoFU\nl5OgPvC7A1W5y+LpyhJ5McxgZxvhTJjgQ+qeLpSJgjadiBhC2NNpgRft8sds\nE0N82voZEzCkF+esTvvKifJReXNhLgJp+8KZaoutUvWn3hkIne1smFJG4Nb9\ns+TnfVrTG7TVu/lPsRUdtK+D7I422uU/Qpys45D9HkB2Z4qsXLlpZEttkqiL\n3sH8d3fupIiocQnvmvLRR+cr/1QvPeSR5uTWK2hB+h/wi4RrMSbj1hSE91p+\nqY59cz1dyv6A86qozjwi7Qs8ej23JYUzR+hCzsvuu9AAZuuu/Mk91/PM2XHx\nNsFQ+Z7y5+NKCsdBHAqgj6W4Xag2I6SpPr1pQ8NX+QSSfzsqXsl16SEb5F3h\nvgIA490mpGap+eENVIg+3UcZkItCxq947KrBn36mvRjTPPhIMzSpZaDM0oxQ\nkdP5GILojfItwEhDlifKRnVlXXZVdXZ6g+kH91ZzvHfaiL4TsuSopPvWSkF1\nuRmkW9vl7XVBtM8vMReXufGZtjdgOcSlEvRJ78xJk6IVaEDByTlXS/xzTivi\nA37fUbgzMQ+dDKHNFkszKvX6ekKz3uoVD+hP2uuHQFtd/zQk4xqSEwMbI8Oh\nd++GKL7D5Ui/MnW8p/oZhQTC02T+VI5NTWvyhChoydrsvdHjFVULuqHaCKwL\nmW1l\r\n=P2UA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsVM+7EmuYipi/q3B876OPxDkt/k8HKPZrEET+UODkPwIhANyMYAb894OpeZHJUjIYwOC5tr9rdhmAF8DMo2D8NXyx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.a6d312e5.0_1611265629840_0.30028818643048916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.027365eb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/ripple":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2RYHkNvv2QbW/E7LdlgYbH/VKtqjTRstp1c/aeWTK9ERcXQCikLCDrPPjLxARzpHgQYb/fmLM9Vu85rNSF/4aQ==","shasum":"7a2a1fec5dd5ec4ce7406cf6f49d623e2b4caaa3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.027365eb.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz56CRA9TVsSAnZWagAAPzgP/jm0ewnXDvKIkBbO7iT3\nZjGh2BGOr44LXdUKODjZ2EetiIGR4XtumfaPcvqyZi+qK+r9QvW1nJf9gkhk\nfWy1co42WqKIbLeiaZxmiLWZI54Bp+7TDAJCxvb3fqtWCeKvR3wsALc+COfc\nZaU2i2Z8ZoBLQT4RNhtwxlO2O2cIFnC1k0uqEH9WElNGnxOY0JopqR1Ed2sU\noJPS+V8WNdm/+KHK8MC5wT2J+Am+JoOnHR+T772wF2964AGUu83DmBjrAUtI\niku1Iqj56s+ZDo95FJDaEo2sCrGy0hEzionLGNyFyU7f7Euq3LKmbeg3gdxW\nhhi9z5s187w7GSZWF1dADWgrgUFts0CpK/SY3NO5HzrvS+2f+a4yoq9RleyX\nJ9lcVlhXZ9ItmcY0ehE09Z2ElfgbEO+1xeNL2xV3n8dqF+9KVHZjBwQkg/yj\n59LEmt4EgoEvMeUYwkOj6rgR1dM7g+TDc/Xfl0eYAH3ROokBNVeJG6oSz9cX\n/+Xwee78RBlxAIhEIhyMNhjsDi8u2HaSJXS1iL7VZHTtVMekmskpYZziN6Iz\nZjhlsl4RboHoewblnHFdk9M2aGuT2ZRZglucbCAD65MrkZevPO2T2DZ4Gj7s\nlACBsiHXyZ3eNVjNyJOAnBTt9JxvgEeXscRUBtsPLwzYx4I+wIazGzqGCZG1\nKEWQ\r\n=67Ce\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPAD7WtPP1FUJC6S0Chihyk86Xj/wlfm7Nq4YMtw4LUAiA0Xe6UKibM8dW1sMWITVCiA9wJ5dTijyeSSbRBrC1UyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.027365eb.0_1611349626503_0.9244231751398169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.7e72b66d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/ripple":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qpz1Dy5vsOPzeZRF/JQaKOK5W5x3m1XWDPcMGImoQNrKjxmZK+sOICrRCI2iOowPkaQ1W7z1mHhqc2lOFiiqZg==","shasum":"c3b02b6e6bb8d7023cece5982a3475be347269a4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.7e72b66d.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18MCRA9TVsSAnZWagAAgAMP/2LmntcSAZPQdlVSy4mi\nt5wUI1P9xUBQEsjSZRM4yCF/u9Kzlx16TwUQqSkyxDven+RftE2NzrBKrvOb\nO2805WjY103D2OX8vxxkrmnRlQ/sdspiUEGNIlbPUjjrvzTESiAIeo1oVoCk\ncRrY+RxDPgfMaUgsyFpcdrzW17mDBXJbfPMRRfBSHKwbRLND90C2bMjvopoM\nSb5AWXD45Q/3Q+kxbXXbiICH6/QMWr08piyUWWXRnT3XBw/T1eDR9K01a7Rb\nyqFqFhaKdreFZKQW+wD+VEXOj5mviFdtwIS7J/pMLoB2AegV1z3o5SYYex3o\nITngwe8pVK9NJzhovwD6bNTehpra4T5uU3o3RgzjqTgB200H053dl1xQDJ0w\niYS92EWcllX/naJq6AFZNTPv7HDMHEcwjPWe5zx2Zed7y+z3G6RkNqXUY8id\nB+4+zrmJY6aDSTap14CW+CsYc2YvaosxmLp6WOO94+thLSChzqZznEESSH2c\nzLYjrfYNcMZzQWOD+WYbpZKFOHb3+2Qxhgw6n6QwkFrbuJJnaIeZl+5E+bCa\nGXsWIAy2mqhr4ymjv+0wJ5InzE40EI/m8qPvORPRkX7gxJxd/032Da8npRTR\n3QgfMGvoWs80DpnIYuNk/ujuM1sphq/59h34m0JstsOu06iDAdlaV3WncMCc\naTVe\r\n=e9sb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT/qexZqTT9PvC6qwcaT3x466uee/kxAKvmJxnRBrOjAiAkj6U3TDuvkpZN/V8qiRnMFTMCKNyxrH/1iEtl7MzIVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.7e72b66d.0_1611357964277_0.42456658583314333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/ripple":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JL1IXQ/fKdh0o8e0OZcVDpIpl2i5GkNnXKs3PgRzyppF3TfffaqMi0oCs/m9W1eK2BbcnCoK2xSRByJrNqwekw==","shasum":"d0b9b44fd6dd4084bd2e78966deb293ccb732cf8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CJCRA9TVsSAnZWagAA5GIP/i6A7VZwjLZRtNbdZo6t\nyyrpK3vY3CwSeFcY+quJsQxccmlZLEAHzx8qrEt/tPuJiw9eGtBZWf3KqdBC\nm3KfMlcoSUkdco88DCNwbKzoOZa86cyLs8Sl45abfumJFqZ+H4m+MS/JXArX\nn/3Cva8nQdyEyifRR0g8pmDN9qPmNb0/gUYWhowwfc6usjeSUbH9s4LaL8oA\nKGNl6XJ+PNIgY0e3UIwwHep9PeTE+sMVqPkrXCjTZUgU2wzv8EyQf2a5BgZv\nkDvHpabHJCqWjUIdKd+WgY8/dre1Hh8kREid9GJDPQIG5RRqWWwiVuwB2Hnq\nEEycz61n40cQDBthZGC8ZuXPZWtZheRwXwiFSVxGk9Q/PzrrzsnuoR3UT08i\njzR39x+EIb0V+k9VFLs5mAngRytaCA58E2aCPJPvs1Ub2FJgjAFhqD01sRWp\nwYnm95XhwwjHeApfBS2mRaSykiBJaKKnwMoAoufvrAJykte+ulGu5ZMQQuXL\n3IHwR1QUsg0ltivQoqLd6w8Wz4mWkk4kUFCMWN+fOoDTWBPr3tJiPWEKR12G\niYhl0cQlyGlSBgj08ST3phgLMOfXLZGD0jcjQaKwuLVe1v65SfIgA+d4eVKS\n9x1HZIyZ0G3JbPwewliItIMxJguYrLErIIEeq0sfMqRE0hHUJwdCUtDKlx5p\nxa/t\r\n=Gpyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvzM8Wy/Efp93wwWGqZorZhfGWoiXjUDlfTByKo24LaAiBKNTsnvPNcMetp8qlNph6Kfy3H+2YMdbFEsV9u2WOYoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.a6d6a1e7.0_1611358344596_0.49856410792647154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b95fe100.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/ripple":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Rtn9sWX+3ZuMXcB7aWe5bOyWjCAnbq/d53VaXcDVZ6PkIeYnJNNq1/I3MReO9xt720yNlyp96URUZQrnEX5Kdg==","shasum":"b0dca1ffe616e79d8d922be3f4618378e42094a1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b95fe100.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UECRA9TVsSAnZWagAAubsP/j/Agc7+fgt8d2Uv0TsQ\nw9Mx+Nc7YBpcvtU0DMGQsH5ZdhfdM58QPlhBHiq0bBQRLaOjtGsoBX3Ely9s\nZBmEoSCIg50txyzEJpDEwwpXeI9YbDsKOllWRxGiau4KM3/tNqQGmqQJiaJr\neCT3uo1R9jV5zYRVCsOsPrY56ewgzaGpLBU3alMcvfwUF3uZtSxqMIibUFKJ\nJtC+EKT6QP6Jn9k9ZbkMVC113bRMrT3Iajze9kyVMT7txTJMy92lE2iIxX5Y\nxJK2tJlCuU/wQl+lUUi/QtxWpkcDjancULw/tHQjCZZMvOYJwA96LI0nYvHd\nA/QsrBQAYqZG5J4TIToG1b/3IFUbTUjOBmb3h75jClIA+zrj0azDrUkxmg46\n3rWlrpGIN/cNDIoOX2aO9AJwWoGSGbOB9GQggXWuYLk9YnJYyf9hvTl+WR/g\nG40RpRe2o2/tm9GIKIbvE3UOysL4mYUBKIRfGHk3rpReM5KE69FoHLy5ydWh\nWS7bhaOdxmcfiMkR0uFuVliuhBkcr3YeICKAebWms8H9mBC8NwXtddMYVlP+\n4zEQJkKDY4SUY00wGJ2Xp6ynimJdqX1slE6ms1aqAAjRlo+RMnMYhqam2D4g\nbiGUXfyGZpspI/4wIzUp+WE+Ym6jJ5bbkTx7AMoWzK8qTKrAp+YisIOEFoei\nfpoN\r\n=7PIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLm9X+OJfLA74iOjxFspcrZLD8fjcoXnjDN7Evyt/3yAiAnfwaLwzoZMJZci7xwSJQ+ioK8fIYJfozSXpySW6DMfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b95fe100.0_1611359492537_0.19484933434428586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c8797192.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Yo2lhRamJFo/2+L/ckVuVgVw5GJT15TJIVYSIba7xMIbGV9YtkWGJ3zy6W+DnOez5yE9DiLQOns8Jxq6VjF3Nw==","shasum":"c2ca4c0e4809738f6ad8be3ec2e4c20d3e074f5d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c8797192.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ifCRA9TVsSAnZWagAAA1AQAKLkhaXolfTcuWCQCkjY\nThoDBNs6Ry0oMFd9QSB8Ju0Xtf73FVpau3f2hTvpRCm3w+nEbV0+ozH2trvZ\n4PhpVKngV42vY+coKWGiRbSQ85XSOgiJs+PJh3zqvjJAO2U1R9p1ReQekRPO\nD+udu/gmKiddm0spxZ8lS37SGp+rQVc4geJsvjEOnUz2X9KO1IYkJMjpnF8O\n1cikEFM0K/oNLD8bEw53HL+TOWBU/2RGJT7ttN8iAgJufiO2WzeGjhz8UqLw\niopiUqdofknlQMe8039i+8rsJqyAKXsYP/k2Dmd/BAZzvDoWPNAOvU/DO2WI\nfcDzqzo+78DER7XTbTGVBiKF/p4JzWGYut1hFssBRlagZkdzn7rD0UOPvaAj\nk1Q1G7F2x8D1A8XhgK390G6yzxJFIVRiQujsD5f1YmzE9+XlsH3kAQY6sasT\nYMIvzNgpipBJ/eEXhq+UxezWbxKQOf5l4KO8DyQbxH4BI4IVPvuXYNZrTan0\nwL2nX18t7tqoUN5kW+vSr+uwOfFKlQNOudNoliJ5AJrL2gzwctaPPiS0ZDsj\n1yEScBpX2iFXlK9kRPUD/Yhppfcx5MPvsIeNGbqon+rKJVbMkqtOEFXSAtu5\nq2kzBMuGcb+XQW9BiZb2A+e/7SGM7VY+0VWXmk8S6rdD8m1F3kRSqngI3VUm\nZ7zq\r\n=lLgT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAdMvOpm1Z4GFi3gYlCQzPhzmFbxFpMkXJ7r8aK7Gd1gIhAPATrTAdIRs2XSe3ajXHtKzjnMVwgxgMMSP7nYj84b/h"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c8797192.0_1611360415282_0.985088114205938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.946f5563.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L3wUfrLzQVxkqUoYuO4cBm/kimdAdOM/nLzP77J7pvm7wrwRudjowIv2xMiWY9aGNaBG3iu2xzlT3gp+xQmGRg==","shasum":"d8a8d6dd1290e7123931a464299f3438242e6720","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.946f5563.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EaCRA9TVsSAnZWagAAkUYP/2s5OoHeOaQbMUCjp1HY\ntlXmVOE0u/EBak1Vt+Tby5dVP/BzdpH2YyzSqP7udL0EjkhVPgvgVfeOWzQr\naDQa+lOckHwaDQyJ1DPOFcSZ+4lOtQpCkE4wBZHHsXCfYyOTZxgEK1M6uUYg\nQs83Zp3iJLl7sKkysjSSOwxRmYLBXnW4JpKNBFM4e4JsH/IIDHacjpYLoeiQ\ntfHet5q/0W0Qbv4ihKuZSwL48aylCNlWG/jJPy2GxnTPc+DoTWxV/tfOQVas\nF7s1728FSGT7PcI90GxouDQoT+scm3IEv/px8mSb+NmhaYt4lOo7E8kFAyJP\n62xKwj2AUbOHpbpip953rzO2S3SZvZ1bHEEoZLjAaRn1MvW8dRicWzZTF6RK\nvmH3v7hqFZg0KRLb886F8UctLO7QORYeQs4SBBLyYWQJQzJB2G62B75fr+Zw\nucyOrqBl1TCCw+KfiVjcc6UVTyZncySgzbQJz4bHnbrpFI/PQj4VzaItnpaq\nrrwwUak+Z0WGMPOIQk8z+0XCuIQtll5VJyNPjrL0x1/60qqhp1ykrevbJRyo\n11Zj72iLvzXcvhF87Fy3BJ/vsvEDANDiijBT+rqwKG+83sgp5ckBfueAFuRv\nWRQ81rz8EomYFzMfH6IgpCnZzBKr9aUj0zishSxeWoSqq0QB5b2pPlDQ+InB\n4HQL\r\n=+7Iw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr2rf5tvU6kkMLoaV4PGLtbUdNVrhAfb4iJN9he6bMQwIhAN89ROFZyw49usOZy2j89zViyb2vwe5P/wvjKBLOFl7J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.946f5563.0_1611362586396_0.1451781244528676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.43664f0e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Lj+Ex4j+85W86FNv5l7PpSc8JoX0LHr31m+5/1ElAecU09xnRz6y8TMdWJnOxgBwjn/CZ4rPma+lbiXqHAdBNw==","shasum":"2e9bce3fc0f21b5e5ad7cdfbc3af1802dd37591f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.43664f0e.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0ipCRA9TVsSAnZWagAANJkP/Rr6mKjVmlqDwZu3TtQ/\nJS0U7U40qLMtFFwHasegm+5Nb9tFDYkhJ2fLQXI2f2dcQ61d8j2pUq/KL5Wq\nsuD3WIQabY4NPk6fkW3W10IUf7BUNAhzD7YnYnLHg/pARcQgloobNVPmv5AO\n2rrsOR8qEOlcMxL0rFhkCJ2uJL47OxjYewWWfuvfbbAzSuzUBACDu94U9QQl\nd1TzPT9NBtmEIEKbaqDu7tc8kgOgZlVjOZifAHvKIXDnLYjpYjaon1aiu9FO\nLMe8FVfSOiPFvbZTKrf0BVcNXLTmpTmu2FhIQW40yxZWRQvDZaewoDvTARLL\nRFL4FowwQQ7warv+eHsY5VTwOtlepEf9MmRm2BJqLEBby1c1V0luJ7akx+3e\nBJ958XZGgtp9Fe8gbb8z/mWV+aHN4+MQ8tzo1ZDA3FFwvMY7+g24J/XkzvzI\n0ApkQPvHhVg05iiJjDmr8m7DnElp+NNMKyWVu7hMb20OQFaDjRhS0ksur2DG\nJHM1gcAq1rjVj8p5CkSCDaKPv5eL33OauCEjY0b1361OAYNbE87igl0rIKeK\nwb8a65cX8UwcTms/cPbfoqg4LsBIBhzirrB6NOIAOaGtyn4MfyPNGER1I+MK\nE3Ed6pIanP9GVbbN1DQP643FFlz8oS/IwBhg6R18ViWCT2ml8l7WQSboyamn\nvonm\r\n=eyI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBX4xn6/uOohpQmxv84lU52ATP8JPhC9zqaphMMd6DDhAiEAvDOz+zDctcN9eCIKD71CSEJu9KE4m8/cSuB4Ni8sy4M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.43664f0e.0_1611614377082_0.036247710102706776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2e769e3c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JXlpSpu3PqaB5AMwcxITA0Lc+8McVO5RNXybi/jzBxYLT43nKZTk7Yaahza+m+/K+OK782pBcIsPARW1odUobA==","shasum":"03bed920d90a8e934c0e47e6d636bfb446ba3585","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2e769e3c.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zgCRA9TVsSAnZWagAAK4cP/3EiXHo1TpkT3DvFzc2+\nO9jruyR8L3LOUIwh+PEHd4v67qi2o1+XrWX8lbJjd7EAS7HTzvE1DyODgvg7\nephmbWpJGl0g6gFtqKPlNbPDcAWFGWLesu8AyklLHtOm25yc8mxEOMgqqoLc\nc1LkdKt2HGFWlenAgIKHTUexSOZ+VZ6wjm38Pl5gAsBZyyS2ozSrCfpRNgF1\nvKzJjR4quKZy5xKBqMLwK5s9UPjr/UIX9r8o2loiSRGA9lYn/AYhq/BaeSPc\n2nXDyriUCndxCVhh5jkH3FV0gQVTKYDOtWI4sAbgU15DiC63D6xErj5n58GA\njPq/Ne1x3/PE1Bk2QTuoT/xzgP8IVJVQtgi41WP8q5DzFc92n7j9epgZUIjI\nz1hJF70IXoWBkysj1as+ZEicjoRLlWxbqs+ekSOkulvd32IyPDgSad9w11Ib\nrQZLQNpgl4weITE2a+Ys7J9h9mYgNnrRmuNVebnXSMGQgCkmAR7V/gQqNWVq\nL/+prpCaZmbQvgqitak6nr5TQQn/e/m4dSoEw80OpTdNFUy5GiXIiUpHj9f/\ncCLs+KNBB/xEi9DPjCXJsWBWbhPrYzxIRHIPV/6YQivxGiC9GvGIfiHGBQFq\ntA+FRQpaYa6ozzW5byIK4uHpeMMs7W6FOxiCjqDJen1za7LogSG2Ao0hT7jV\np7kw\r\n=fX0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSPtL9iHvh3q6Q7qOV8R9Xo/5Bt96ltKFniqVc3zmUhgIhAKGGLQek+cgs/UD/PlWHbQB7mjwKgtUG9FIQAMWInyP9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2e769e3c.0_1611619551953_0.33447395660046175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.14e01610.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tFmwo9ftsKLyJS0DVvClJS//9Vjp9u/bV/yVNe7kXzkS+RtyIjTk1w12XDKlrVSjim0aSfKDnkRpWbIADbbrfg==","shasum":"48809c2f03e6863265abcf7f4d535d5c9e8aa6f3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.14e01610.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQpCRA9TVsSAnZWagAA/fkQAJy9ZRw675K4XI0ekjhJ\ngaA4o7gxcRvce98XGDv0lwcgK51Cfk9HaQuGTWqeeH5bwARCcU4F9yaTbu2p\nweSE0cCU0XMuETgflHKpTDLqD6Tphi7MYrwYf/rszJBvvY8tprLJ6Krnd/j6\npgGENt6uUWMooll5YCFS3RdaBGD5vs2uW34HZMmb9WfYNabU/4DEVXtiPDz2\nuUs+AZogBUwOzqomQ7ZII/MolMS6l3SAxT8Oh+QzHgMSZTC85EM9ClGXOTFB\ndwczZxNiSeaaETlReCJKGy+nveo7u3nQg0pYmyPq9EfuOnVfJvjNGzYSoTav\nWq0dM9Y4iZlgP3v0VU8rFNQxPFD6W4agQlqIUHA6cyF+y6WgTDNNSTUpaEgV\n332vnK+R/auDo1XiedpfEiz2T3rYm2xla6RrwZycmxoNNLBsq18pyponMxB5\n/qEo/dRrOaxpPLrNQuCWpvqI4o4/AjNXMZtouOd6nOges7jttyCPmW3p/0Ts\nSQ/sr6gq/3NQmiVcSa36aGVFtLRi4/Z5LEAJp1cGVXT6gk1C0B7oeTHLFr7a\nxCGvTutwrSdD2mzfwJma4FRijHCrsOPcIGQo7US+TUX9+FoN5/CcYYIjtuGW\ndhGnsK+AlAVq+TE9NvVeXFMX0NxSogQ2hh3c96t+ZYzOJoJtfeBcMqVPqyZy\nxa3U\r\n=Kda3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyLK9qnSsPhNEX6nF42Ikv35HHOQaTMZf7II0UPpTDSAIgMbGjx9SOibdLwaDxg/okFm2ZaChkAJqSM+et50yQ9Kc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.14e01610.0_1611777064747_0.8583146214128867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5de00c1b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BU//hzkupQ7iaCyKAUehq4rHzSPmUhx19ap66BEYYBQRkMUmVCdPwJ7wnj7OchN8eBytKNco4+EHLRMJFftz4w==","shasum":"090ef91de3a4e94116398b17f1983ef361033081","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5de00c1b.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcotCRA9TVsSAnZWagAAWZYP/1lKaaJeAKtRxEEsurM7\nVg19c/xYTOQyd3PpCCPoCEOmtuIZnQQUpII40uOBvGBGJKF3FxoRl6wJwWWd\nT/cVJy1bwT/gnYg0WenCjo1FyRhoMsqwKokv/KwGVMnMwfql3YBHTK3nWhbP\n07zlTUH8LX7O6JBj3U3GljHfanQbYRIaZwEr9/O8yrhGrvdTICYkQoCkHHvJ\nP0tljbZIXSv27ts5df1vIoEW0EVJgiypWvPrJDzCQWOiP4/Ewk6MaPGYRAkN\ng6JWXac+40iXc/J66/wgpN60iGH5TuBllQhEKpgXSInDynLJnPug1AbXdq68\nFL6f4NUsE6YreFyYQZKzF0HziQiFd1zdGjhevJv6RIw25pJKVGHyXlWr6ArN\nHfCwQOXQTO01s6uBfDpYbeE8/zYfPQOf5YjXfMCTSPGYJ+Cizd93bwdRhKtO\n60vIuAIvlg/NCOw40iFYF3e7X4JfHWwnEkq9ij09uwfWTVkYLUExXUeWzlWP\nagOnEEloi9X5FooRvhNC8l0MK3pYLcnBrTqPsSWypzUdPGRnhtHkmDulv9x0\nlA6jOGBCMzSFJwWFnMwBgRkOY9w9vCz5nzwrDtPNBSM+mjX7JKpcjiPuvoWy\nn8oyYpwebAUevxCVVCxFvrIIPQA/8an1sEOvCBwYfKpHT+v1cK5IPpE1y38h\nXQTD\r\n=Bjsd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz+uFFJPgGrjKJ1jvrP/paUQAgUvAEJ7Uzo+NpOF13mAIgUC6jmAMVBsC6kKchMQSO/uQL0avELOBGnOexfEgLZI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5de00c1b.0_1611778605497_0.6973664234511454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5a328336.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-ltgN16S4HJarY4cMPEA4dy3SPyMlpV1pTqNbM23dnRLvSFZuvJCjCh+8AzhWT1aOLIL+CtFxF97SCH8hNB+KFg==","shasum":"3b149fada760889e20139598cbe9ebd390dc5cd6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5a328336.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZpCRA9TVsSAnZWagAA8JIP/13iNLYtz5fToUSWo4nn\nCflHMEVIIewaA5/feBjab7Y2+pKWZ/Db6LBnyO7Km8/azr5oifoSwAnNnWpe\nLw8ndAkuB1eRPpmD9BFPoYvaS8v536j87rZExWPs2xz3D5Ah26upLdqj3Ch4\nsyScqVdk/zQ8wkDgEs+eMVGvLGmDGJhSxhvurtIYrfA8n05S3CakudPAXy07\niQFkBF1A5qyv8I/I3kkFkreZg0cE/x0oz3e09F5A4YlbdSJiAqp5vNFPCmeW\nbGz2qODiVrPju9L8VQSNTyo6DfH6H4L94fsenHKBVdXGmBxOpdkvcC8q7Ktj\nkeZFc+464DvYqv1t049auTQdYgJaPFTJOBVH2qbzPef+vTM/cW2NIpxk3NCL\nU3QvQKIRSGuNHZiKSYzIN1bckv85pE5h3Wy0rRV8Vbz2xMKKahplidvIs16V\n9QcAg77z2Nwm2VgjXVTqYkeNFdj0xuPLxLGBRfz99ZPT0XR23+qsFMdgApgx\ntMZOZP7Eme8jJ14gCyakO9cUA+6iI5JQUAILIXhTHtUObrMkDDgVsYeqJkay\ndtqS6WsFyICL742xJLIMRKMTG5bClm22JzJh9L9oD45qiI2wsqvVhED0hNtq\naPMJqPvi6Hz+ShjeYbW8W58pIr6OMl+3tWzTAMUqu+upIDrSv9P/LrZ13PVk\nJkQk\r\n=spWJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD80ObD4FY1ul1CKJTpzaMbUuZ3t6Eap6FpSKBDQbxyGwIhAPV8tvGqD+zVa4npue5zpchCGQr4hVwhzwaD05MCVioB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5a328336.0_1611863656775_0.39813790753628986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.533b1251.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Y2/uxNJZGm0aCvdsEebCZTBNqxd7jqAQ9u2e0V0H9G5i7fBIMixYEoMbC1KE+8SJmlkCYxiayKpqjCMVs8Lt8g==","shasum":"e3c1e44435d3ecb749ce70ea35fc6511a750ca29","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.533b1251.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWTCRA9TVsSAnZWagAAnjAP/1CslQd4w/k7REGl7DlG\n8IlATlEF5KE9M6zTDwlAuk/MgBEJSeBnPcwhzJMRK8b5yTfn2NG3CedSt/R6\nEkOQcyOpgeMsQOIi2/seSpfG3aohcBbvNJGBzhBB0m+SmYYX1VlW7T2FyoQx\no0c4WF551zJstPQKK9P+mmKVg6hZX+OuqcsPp01MaLo9an0XdjSfD5oAFmCZ\nHNk3KcEwc/LHFw6ZcfBHiIuqFvelev/CF8Xu3NeyW67c35P09fBtUfrWCN4j\nqZjvaf5NKe1P3f+CvsKKvuL82LZki3zZUTesHOQqKPnoopK2iLd4b9sVFERA\nWEODO9N06HXcI7VR+dhpfylEqVNGCboMc08lzQOODUld6KadNvGuIn0+sDES\nisuEM5gWACYSGulc79a62FCTNOvur7WxKS2Cok/pfhsf7/eXhKOUkSkkYrCR\nYdrEY1sVXaOsmPVkxQmWOJrKUq3LlPZ1nb8v41nvJA32FF2Rh6om4RdO5KxF\nitdUMk8q3gX4og6Bx6izsPGl515WbOuhxQLvXPQmaVUIqa9TKkUKeQQss1R3\nQTKAKte07qzq+B0S/jrhXe3CICx8E84/N26AcC4+SR30LYs7DUtl2kwEBFbS\n7gkGfNctzFX1b9XJJ3sWzef0n9g4aNh5kOicwfdORbiGUd43gfyfwhxTMUAG\nEo0w\r\n=qlb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQwvys7foWNrrGfUJsE50TD/lRDXd4gNXk0iHtELLgdAiEAuzCSwNvGIR2nkQCI9o+VlzLMNrS8qD9QCfKJGAoKpr4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.533b1251.0_1611933075489_0.324459658215666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-pxdaRQ+KgrwqlbYZO0olkDORBSrQusTpLNdgGrHTkWwPmCL7px+BZqlzQjx/XcIQGpexvvUu0sM3WiaEpWTRpQ==","shasum":"d05d500c9ba7774a65feff395ea29d229d36e3f8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.ab5c0a10.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNBCRA9TVsSAnZWagAAU9MQAJad5YmNMkpkkoKUyPmK\nXThP/3IfAU9XAEhZGh1F6SnZXxOSN+XuBu8XY7/Qbp/rtTI2lD+bvTKXjiRi\nO9MMQYfeM5oksJwyKAQaCiTXDl0kdhp8vn7+snjDgTIyYAGyQ/L3toZgs9gl\nwmGydrJRfm5EakAdOQa1NbcLyi53Ny0TEsJFbAmYgYPHkapiRN1qLngF5a30\nGPthCwvy8c9dlGyjCuO6SoZmfxTLu4VFlfg9aEMJuEhkX+vaTOllQ8qs9QSa\nBatTlNS4ffCN1id0weKyFMpprRd+Yk9UxlrIN+kUsQTj8eMTvbGYFwVWqjlf\nh7Dd60d14lMxp/OtCIwIRjSmlQleSaoegJw8UgpT6QtRcibfje8GQOG/3Alq\n2gcKNbLqK4iSzLIX+TkJs2YJ1OGKxOsmqpho3u5N/mtCgcLDpqecdASffD1u\nQ9GiH2CHmj9pMgt3AtKCMFjOPy/wSan77jO90vT7IlccekNHmHmrlha8gzp4\n+NCXHjkve3HcqZxYLDiO+IXgK+uVQaVUtD5EoYK+bRalEDWQsUolAyt0w4k+\nVVLovcczwGqwjm+K2n0g4kS5oi9kXLm9awIbd2cj5wh1TLBsTMKDWyhbdpBX\nljrOWKRO7j/dzFs8niRT1vhrC/itoABxCw92nfeTMYVuFkrGOeNU48BLgh7Z\ne19T\r\n=YgHM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/AA6abTxG4W24pECspRLZNX9xAhoR1NWKdhmv/QXfDAiEAltb+njROSPneZrx00SmHZp4ZwLRKAq4VdC+L5F5ll3M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.ab5c0a10.0_1612297024860_0.885757887030828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b7a40b27.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-V1SKWHwIHR4tNowYGShDMmnf/tFCdGND/P7euqmlVOc3Cyq3Yr6HNWH1iydb1nkrNyM+pM1S1nOh2x8ILh91Sg==","shasum":"7454d0273ce62ec2dd2f05fc25bc6cc071720b56","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b7a40b27.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrs1CRA9TVsSAnZWagAAW+YP/joe5hykYxwFrvkeowOv\nFgbcGwhKxJY5dmpChle41GO3sC1j6jO2ofzEMxpff7LobAPZ8WMMNnnxpHbJ\nlWH8bA5qr2+/XY/Or1MrvVSxZBb6laZMQp2sxrpJlvN77w+QUX1wTpiWXvGD\nG9CXm9xvlrmQG6zm46VbVA8BErs3fW2iFbCy2j2wQGmkCVkGOhDV2zIG+txs\nE8rkZJTV4CDo8Qjq2mF0XT0rApG1uV1O14YeJkFAr+pVc4Z4tzhtZvRWdtdV\nkftLqfDstnvquJDcgh/0KNyvN5Gn2cseZaO7HWP2R2hQ9WQdEXp8niYc5M5J\n7Ek6BmmKEwoFqs/+cjRW2ajnGCBvlcmRNFPrINQgwbvhwYTMV6ca+6brDrjb\ni6Lo4Xt1x/HESuzmb/qQpjsqaZevMYC0h6hFOenVvAbSdkhctuDsSRcYwWhL\nsFwqzTnmnmLK46NuwcqGUK86LoJ6i3+OwtmghDTB+AZifz171gXkpturykR8\npK6UoJNQo0gNpPIio4tYO9z6pvPHK5nHE1HF7hrc/QZFQARaTfu3bmxEqqo1\nK7jz/XgR1EMz6ktjvbiUfVVWtSDWMDBVr7Y7XnlBVTeRCllGIIKXCkiX2pNJ\nNR/yOnvHCiQGoHQqoayzl//eMiTRqkTmz13tPxcuj6KjEb8NdvvNa5N5yO69\nDdbV\r\n=0+ig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV0ir4nYSSIdKvn7xT9sCnk6UZdYjsE0wBiDrkTfA4IgIgXtQGYd+f+X08H7fxDz5Gtz2z/Y/Dqk3sombRm+kyHgo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b7a40b27.0_1612364596619_0.40901688192219554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0fdee204.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/ripple":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-QnVYRuyQc91yxAtKwQxw4vQoGJZHLsuLS5WeBsmLBmA/01O56geJ3Aamku8ZUlN+C0VkCoq4HUCV7Wf4O/B9lg==","shasum":"624488883f41acaf004e3a2f6f80f73e22b2d26f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0fdee204.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyHCRA9TVsSAnZWagAAYsMQAJXxRJaVmNebLmsMsGLs\n6XW+6YfrGE9JbtW9lqv69dTA9r/WkYNGw6wsx5PoT63BRel7fmoBW+ZUb4dE\ndZS1l/0JnDTs9a0aMu42ymdsLdvNUsdNFM0JP0eU+SBUXlZIKopTgiRlWcRq\nN1j+1aUjx0VvvF7NMRE/AbWLhJtSUW/OvwqOzi/YVRc78PyVnnUnAgyKkhmw\n03hQ/YvFq/PIQbKrUTVd2wcVO32Q/r83BKane1mR4ymjF1kEgF3LXNvx4+Uu\nRLdybuQmxS8NnefhagLoawFprSXan3/LCjO+tTMC82QUDDhwSUlLm/XyjRow\n8N8IvQwo3fX47l61942XwFzQPOM+0q9wEefVmysC/qTfh8asSMQAx+a+aipr\nlSPc63aJIGEo58/UmZ0N5TvjwP0dphLRJIspvCDiSHJFvFvD1SjdEMKS1akK\nogLm0tenGfB6RXIeWP0TJEoxrQlpECGLxiWdoVymiZvIRXmuys4ZxeXEsIgf\n2vAg9U2V7ps5j2jjKTt/ZMr23xh3AVPAKEqnU+XFG91emCh3KjdmZFqfUd3y\nqdZ7WOhdXLNeXVWKC1aq58X1dwPfoDkMQCLB9B5FZl3IIOxm4GsBmrKvw8As\nSONqXN6tIE5KQ4GP762qBkwruSLS4MDmwH/U43yQydap4HGzDeHCD8StgHzi\nt0Of\r\n=1lrl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMC00kPCjed1OLAK85LudOS3UvYk8AbkPFu6YkwU6H3wIgKcRBn3V6eLNr6K7VWBr4xExROxmVe67+kFJxUCeIIvc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0fdee204.0_1612377223556_0.6212188311153146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5160e548.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/ripple":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-vB46kh9tP/6+mJ9dYKOzsel1GIYgqGXP0YaJO8OXJIhKRRWNwvSU3+7rpO9sqOp/es+8kVPSozyYFvSucwPFEg==","shasum":"899ecaeb18457e2f8d462d291ad057c8da037ef1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5160e548.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnfCRA9TVsSAnZWagAAObgQAKRT3NTC15gCxw5+7POA\nNI9+/zH7k3+hXEenBMwzi00EU8ix7mAa+BiQz2dsybbmlGB1DKTX7QtstgG6\n6In1AD6Mf+L5Jri/vwqxigKgSSj5D8NkuI2TEayLGYHFHXIuh4OFniRqtCCz\nZ2C5bqZ+Kzv/h2sKrrJkMNnd2jBOZIGJ+mXKrJVdRf7/ko8T6m5ANyZxwjtQ\nd4WGmpnudftN5zst8FzWsuuCipXv7TJAZFjiWeLmqsWy0dKhzwpLe1OoR2HX\nxd/HpIMOABmCnf9SvsQofwYxD/9PyR+2BLF4vWXLEohITy84JiZcX7u+DDgy\nJEjE/Ig6V58C+wo6DOhXMTuYBKvbB9yPAOClcFVkm9ZcWCzfCUEtkMjLqb7Q\nd7iPQSROAAjH4zn3rvREYa+S7V3h528TVk4M7sCagYy5XsStyMBAXEw/aiP8\nxpMNcLi8GcLlYen1H0bvDfNxn6JVFX/+vnPHuKpGPc5XlGST+iouHpbVg4Kr\niwIsTiCSEhvS9qipmOFq10aeM6MnMCXCeaeMWiiCWxMwnmZXfV8TFww/p6KV\n6hTFd/pSrolcrICLvNkpY+sma2QlmfJwdN4ccv9bTSxJdFfh39Z5xxumn+5v\n2c8KtrqybPwQNeOfhGz16FY+reFYFimHXG/RUKGqzER9DGJCKzUQBqzOiTuU\nFZTX\r\n=MCl4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGcXlDHw8pxBsvQ9zYzYRBt+BK9qHcnqp1t5I6tiSviAiBsPxjGJrugIwMWgOULe7bvnfeXeO0nfUqqXlB1JggdnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5160e548.0_1612569054926_0.35172115319612796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4fa2daec.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/ripple":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ShmeeNwpUnc3+JmulEkk7fCygT9/1tPImdci0hL/GYzKrqKIOfT4FASlmMSpVMUz4bMrhhlKaXjf0/77qSsSWA==","shasum":"ca773c564115b7ef10cae0c23e2145c91ef6eb29","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4fa2daec.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTGCRA9TVsSAnZWagAAITwQAIXSSXL1D3FC7kPLj0B/\nn6zdYzeq3K57FZCaB5znZbGvlvMktkumf7iJlcStqQIup1XwaNOdtMKdtG21\nWnkn6kGO4qdV3lDA+ImZ48Q9oroReUbVTub6GvfatSsR8Q/9tzvRVlektmx0\nxeLAvKZTGmv/7WRQiRefiyzpuhmAEQUKpCKSu1LpW7Fj00VCswfFVLugm7OV\nsyWRGIjjTy/3aRuAKBzUu4Y4noOQP9UiOz231FO/eJJWvjPQPnm2YG6pIFly\n58Wa7Wvg/ie9/Q/3a7s7MLU5+TGOYXKlhLmNlj5m5WWbZqC6O/8+xdTtt9HP\n/QRuCdIEI2vdQQmsRebaDQ6MnOURBfqT/GvyyqnT44Q+1FWe2m2eOx1UIg1K\nX77lR06hbP6qisM0upPvX1d23KUvKKb7YoTmRbsx46+k7sLKaq6PGLSzGdUS\nksliBGZdz7HlygFmslW4UoCLWPCR7VbQUukuFdxbqwbLdZSdIOhActFteytD\nr6kWeLHLAlfI6x2mNhEN/kIAfEGNRgX7W+v323Y+J9DehJCx+Ndgt2ePxeny\nDri7isyyMOXsxXyTXdxerR41hDgtWU56AfhTjHjDSBEQZi8owjJ/wCnffUtP\nVH2h/d31zeYYmBnStxZdj3vVfG9+lmgOKIHhllvRP9nyDMpDlQOS2YwqlMiD\nSLr7\r\n=sNqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfUhP7McHcTTvRYz0v2UmNr9YdkMHdYum2azH7kHDPnAiB6IKpDma4xMfK21uGTiyZO9ocSTlmshgHuDFIl8DhUDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4fa2daec.0_1612829893810_0.9342103861708217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.67f285fb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/ripple":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lvHC8V4hjOS6yna5gNr5x4xi7Zo6xhQ2ppRonoQ4sKKxl0maPnV8JluG4/leGTsK1woTHgh5btuywqaGolS8JA==","shasum":"d0ff92d400d0317048abbf75fd67308297b8df6d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.67f285fb.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxfCRA9TVsSAnZWagAAoREQAJtYJRuATcik6KSU0LUb\nGSIeZ6G59nX+Wzd5i5UokVBJk7HB4Z7X9gylPT6+tRYuwSCmsnHe3lwM8XBq\n/oWw8IEoLenRFv4osnZifxobfrzHEFYMX1bBSA98RwDgSvGGbae5UwaKRlCt\nVsQxcrzI9OmpZg1rufDCko7nOvHbM5sQlOB+s2owukEftVVhzV/bzKFGSEaV\nVtoa8pxJQRXUYlIQVWPNeqxA54Z1+2/l1134otLIQINz0i6ymsYfEIWJQhTN\nXvX7VEFLGqn1GjGps1W8HVt5zt4XUb1PGLU924Skus/a+jnj7K57Giulhmdn\nYJSP/M2lT4sKxCtLxljA524cyOcNdENm1BzyIAUlDP/Xq9/vXm6SXJszvecG\nVlzRe23uKhCB1eK4k8TB1AzHKPNozjtRPkgUBDMjMkhFpQWXpowHLshK2ygb\nvNEGPJ3UIymMod/xjMooRm3r3HPpZ5BeqS3Vwxf8hkgeKb7zrA/UCRhQPME8\n4/3xD8vGVyRl2ejRzUhMKj3shKnzggn4N/Ja35vqBdLDHTIt336tIYW9DdI+\nXOGEARnfLFSz5aegxW+SDLzt8IOkgtOyhvaIn86Gox7Wn7HZrsy9y/aNk1LM\nwJB1CkznrjnlCKbxLE87JWqJkh8uOYS0tpwZSAQYCOQUS2/aRVcngW0PrRCF\nsPta\r\n=seWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFi3En9uoek51Nl9nKy6qdjAmzXieRet4MvivXRMMCpOAiEAizBWJvvcYkGj5T368P6upuL5QQcSTOeadLCyrb6sOvI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.67f285fb.0_1612831838474_0.6053686487983734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.58cd5a70.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/ripple":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Jn0DBJsM/t7oeXTXcfF/2s2gmj2AMY4XIxMlOQzXgVK4ovRGEZty2yoQwEYngpU9LHxKUIHNVbL6WcpAwIZ7dA==","shasum":"cabf525c5aa1dcd6af42a7853690f1aa645dafee","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.58cd5a70.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZcZCRA9TVsSAnZWagAABIEP/RFIxGD8B1hoMADkzlNL\nVqLsRpPdy0yUHg8+yElmnFLdrj6FQplXuC7ZLvR1lcp+paOsREFNjPaLm0iO\nwVCqjGbtPb5mct4mq4tL/Av5tkaajKj5JkHBAnh0hSM5vOCHQfqYMyoJ0NEj\ng6aaaYJ203Bg+GESahJccB/4I8DAv5RrzUXqhavhYbrxxvYUzAhv57OA85IZ\nBG3mVL8qZzMzqUXL739nzSNHCarmdr4Xmo3Jvv53b/7s3VFadx8fiJDg0avz\nLOu7A6OlITmWS8nU6KDKxKFAISFgXAI01XsYRpbV9YLvf4au/uBApZp9hA2S\nwB+pkJXYAfO1P4ByAzEnU79CLkjKtigyucDG4uk7uZpPJmoVxyWKfPw2BWkS\nXc572mPo4pFhBMCoYF5XW66Qp7Sz3WiGrkQIue45noIEzFZoRfZ50PW31lKr\nMrb8fnC6gYOOxFaYPp7wR4+dTfJqELTwbubyMzN9L5sp38U/QcSAR0J5bF9m\nokTS/t8puM8TY9Oo0zqexK6J6Q/d4YN/ji6Q/8XHdAeP1brwZbirrqU5wUip\n+igGqjLd5E1tJbZMkMHf44poEQGAP54CgeZR+Ar3ciAdICnmDYQdvyinBISA\nAPrY5YJ+6MBzGuvP+kINpJMP+70jarapgCetysZ3sI55Sz7P7ls1YOgBXA4t\n5kZr\r\n=Z0lt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQTNkthClAZmedArhS9APQT7rmJ0RBuDxzvJ08dx5jXwIgXDDTsq+QPqml8I2r5Cc++gWIurgSOMVCFhOnILa8r38="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.58cd5a70.0_1613076241949_0.7051129666633797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.8107ca43.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-XXTAnvW7fd1iWeVRfZxvN2OJs1dbKa0U2h/jcQhFOZzythfNrBcjAodr1pvQcBZ4rvR2irfBVJqeDowIy+dWyQ==","shasum":"6990de60f7d13b584c42b255d61a410e3c707dd6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.8107ca43.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2iCRA9TVsSAnZWagAA3cYP/2D3PtvjatHo5t3QH1yX\nj27p+JiT52QOCHRUslppcqZCcdHc1OK3IgJH4mH6ATGCnXDbl4WQ6htZ07kn\nGQKBNMpoVLpcBrmR5HopWNZ4eJB/23EnvGQEH56lQ68Mx0fRLEgjCE+Ul5qF\n/GoZTQFPhKIRVfJOz76z2SC6vv5sP0lWCQrccaAelvVEcbhGI1MdZRpAs0/2\nXD/uY+j8FrgQ+xkGSmhQS8wrbHHgBKRReW1Zobmyj8/x3k0KtpfO/d+G6xoL\naNxs8BrxeE6cVPPoA9AvTzLltvuzMB0P7kljk4XFzVF+NHm9hFePGGyN+Tvg\n9rs/P0pJlOSdHkcZNG6bBeS1phycscBStK3tyzqJHMSOnpJK8Ao7ol8lYvtj\nQZCIx6W6Faf2iGA/Y9ZwQczadocL7mlzzlDlg6nCd/MsHpOqWqpEl8JHNXxf\nQnqCPEMF3DOkovA+V4mK7LFRujH59v46p19E4FRyVCVyPOoe8xrh0HWnG1VN\niZHG99hEPpQvF9YlQTq7Px30nqmGRaR0zTfNbVo8J1BlTJymEUyx9eYdHOO6\nsHQ7cPIaJWdYbLVWmWZ13UMJf6BoH1rSa3bVmwwn8jPdCfk4g4ViBfL2DI3m\nXtDZmfwflznRlIHX11itBbBxT9SHTr0eaHCaakcZzpkWLcAOAMyVVE/dNqYr\nX1DR\r\n=tuZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+Skd9jvgdTUg73RJMGHjL7p4lNJ4HKYen43s+EP3wfAiBa2PvrzMbpBQjUFVLDLjaJ7jIw3FSTpAHGVLo3US9Wdg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.8107ca43.0_1613086114109_0.2880325411721296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.d35d64ef.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-gpcwZxRzVkOMH3LCWgoMnLdJDrFGskiKkJLW7b9aq9r0XZCKW3d4V8ZMzb5KV5aXngxnCH46AVc461B70uo7tA==","shasum":"2f630ce4e727d7313f1d83c9812c51b63362fc67","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.d35d64ef.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcDwCRA9TVsSAnZWagAASzsP/Rkd6S5fatkNnJ+rw6NW\niWj4yGQRV3oi0MzumsEKj4M2lwNV5nHmGbYBOeIRPxx3uA/5ioaippUgGQXQ\nf5sTum6HYR5AljAlT23BSy4izHyz/eoxX0mEeivCTY1Tv4KEAodBeKkQG7AO\nfgK6jw974hk5qXXAVCmmCpfgyUVlxqxZfBWa6S4e1Q3ezDPnI2kNCrF03EVm\nzchFpIXNtI8eKNruT7xTCkgZx1e2i0rOGQQDN6CYnN89RIQBBMbLGAv+aDYd\ncNrpOZfgfM4m587yjrfbkM2HFlDiZcnmJ+94/Cn/a2f6rtoGrVPDnCpifYLi\ndPeqw2q5DU99KIwEdSUrHtTTrWUr5hKi2huE3JHG/Si3NHDdWu1Vj6dSeQ6/\n3BGxGF8Wv6y/5SN1rZiofSLxcdPQfUs2kjbHdcGZ5S2jAm/shqrXWwLbmHYe\nGrxdyYd2xrBLwZClibmjit9/rye9pvAljcE+i7i1PCu0gP0CbOumzOn1mXyf\nu5XRXbDZcwiKhtHHZe/9Xa7wTtQ/U/IGiPbwL2/j7U23TTMWJflo5XYNwwEK\ndc7ltcxOmIl6mCHmKs4RYUTcTkX5sL7vMRFnx8Fc4A6ZVT+BLt/gIw40eybX\nUDQw1ChXgboYpk6RTi2rgXWbLrZuYJRUm7gqrPqM7rEkudcm/QOlW9leXUcX\nZso+\r\n=SMRT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7/zFH3f9lzFfISkVRtwFs4HpVtB5D08jz8cmrLjLrDAIgJHnrp4g0bDNO0Rx1QA6LfK9CnTFfTSkZwD7T4ij6yzk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.d35d64ef.0_1613086960241_0.7657452572418635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.78bcf058.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-yA/QAg0RQ/Vf/Gemhs33fsFoDEeD6t0uBlu4Dz54JAjW25YI9mUlgusZrd5VpITG7h4AsvAN6+010eGjPeMENg==","shasum":"bc6e08fb3df2e607272b65083ac6a720bc7746d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.78bcf058.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBACRA9TVsSAnZWagAAnc8P/31woNVnXL3pCsQIX4nJ\ngYuAUqjHfuPzm6Hq4qCJxzFqe4k6yyEYIM85igLDEa9KX9FAwla2TJCJsD3V\nuZf/7fl2/R87PPjF6yQRRa1RytqZ/sDlSMBqf2Rx4dzHFoAwGXSGeBoysq12\n+aKYi4P8mhozkK+YbXf0Lx8FI08xDDke50k/GoLSoLN4ZWDniC/X/R5CbxU5\nxFkz7C1gQ/20svPTQlfO4toymDiDgUSQRE2ttmc1wHBJyhjt7JMS7zV8EXP1\nVD53DsJwM8wWauEIj/w+JZTcac6ID6H1rs4eEszVLwT/ixEigfK61zI+JJfK\n1G4H0yGMFIWpd0Fofjk4xmhTEN+hQ8hQv73A5pGDKdtwVpjBFaFLJwx53zqE\nf4eiPnjeh1uwcYLXGUr2a/4/m+y5+VuSVnkOeEC4TPBZ2vHyr7B47JanpVCL\nhNMl1GnPD8wSGAGXjTPmhn/8q4xYSJMFQKzGSEBjWqbeIFfCsWWbkGKAvMFO\n2n30yq1We/27/WMmKoF1WC8gzxIkN3ugHUu2UFB5LpPam0Hx2m3pwnZkgi+f\n6rLtCMMy7anMPq5XHzk/zVxd/PRLdYkEiEpB/CklToUQkqU2wdPNJV2HBrjE\n+D6E1NDe4hfFZv4vYXBL6LApCIOdCSy+RsQdb0mpFdFUCMrP7b9FLhaTMHmQ\nB/cY\r\n=czjh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdBcIanI9vlBMkyBFvrrLHyz5p8sm8v42U7J9Lt70O5AIgBP7Ai1qJ8BY4tpO9IQO80ujcIcF8v1rBWovSUn93XNk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.78bcf058.0_1613090879653_0.48247020372089744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0c6908fd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/ripple":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-At5jPMUxC1UOZ2EDicx0o+e1nFnRmNSWfw/YHpRFB+V/GMZ3iCFSUdqpcHg4Fvac+5i3B4N+/UJHSqNkZ8a5/Q==","shasum":"e349e0543c2e26c7b0f3fb0f79d38391f683fb61","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0c6908fd.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjNCRA9TVsSAnZWagAANmAP/3q8eLQ0Bt59jLq5sES/\n+nDuZE2hZ66Har29ET7GxptM1UyS8XHaikhP7Aat3XreRw2352YtHg35qTCk\nD+oROzb9alj7iRNlvocTcUYv2Hv+cN+7BRNo1864Tlm7DDFsjBKNpDPm49Az\n591gLRW9i0qjY7xi3hBKaNxMd07ForXxMQPI0dnCH/0IpYxF4Kxqyv0CzAxT\ng/yiwZS77GYkzEfrsPLOxViWEcO4yqQczqStrmKjo7UySVtg5Lmf+f7PQrmE\nUQ2pe3RMl9iJgPECt84kH7pBgC75MGe1Sa6FUybowFHq3+n5fX0UfB4hGCGO\nhL+wTcHFBMfrkyeXC0GSXrxWJ5RTklqcQnkupaRxXYepKZhCQ1VDK+6b4tQs\nK/EbKExpJjXJojgUZJSsLqtMXeOyWTUaUtO1POMcmXKqJC1ISPuPMPXWvUSm\n+/LBsWOBHyh1hf45cAF5MZFXwQehP9049aSxEdMnALZZyQvBSFFF1DH31bh2\nv51LPVSg6ToUMwxNbmxi25UQN4/0TRiDGNBLdGCkH2OtpBB237tvbZDt1FIt\noZWw5DSW2dV82VshwN/hIJi9F8Zu1Q53VOF8wsK3z3JZJ/lFUEnJF3IJ/gsW\n8JmiA6uOR6eQ8O6LKUCRIyUDVmcqpthnebYmAq5k/2QSCBDC9ootQjWdefbV\neRXJ\r\n=63fa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAsmwcTLg8xII7WDz7JZ+Syqxr/PQ0kxLAGfrLENhdgQIgL8tHVcDtjnnxZkA/lQMgnLyCOt3r3qymcYqJ38vi+EU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0c6908fd.0_1613093068989_0.19696631174864154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/ripple":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-cMusjGqoF9VeezWO9wsPbKCbBhKK0WGdg3CZGor4y2WQ+SjRLhMbrj84HroEB5WD/OWRte+ej34kMJrVvKaXBA==","shasum":"f57b14c1ce510d448bd4e002f906d7869dc5e28d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.f1f34ee0.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJlCRA9TVsSAnZWagAAD3wP/07UWXcHuXId/Omk9Ogd\nA3OhfzPfvhcZb0OxNLmdlrHwKtZpNKZpZIvMxu+ahjYN1uATUcAZua/OAzOj\nnzbz2Jpwf+7ePKBKhETpXYo3bV7MVnq+gc8VYw0zuj27YOFq6E/4cVnRiVsy\nNdmc/tLARWX8pmbmp8qAAGO+4R3O3PtYMVmFpSflGqSz6yIOGFkigiu+WFkk\nZsNlmxvA3LOaQvNIwMuN+qMJddI4pyXk8S+sOdvfs0pIvytGrg9smP52jojL\nwSH1qpTH525TvzF2D838IYnBPv0uujy/Y0dWjpbsYTiqzjvzq+UhXXhcJXKU\nmaXpS+cCCBw0RMqxiCTpqeYtIief/lAo4/bi6S+oNyfB7Eh9HLu4cu+oNHTk\nVDd0hieO2AGT6GTKgmgsIPgvcunugsy54KZdJXt88xy5PD09VR8zNmBJXjJL\nKnfG/gf8n9IFgBWMAEZmRM7KgTOIiqNrzTR69V2u2deacaXYrUF5VECS90Ox\nC4ZJrDCzhoP/cQ4lvmrT/E4wWd74FXcWA4csgyPzexnmbvFsOxS0fR5CvjSe\nkCER5iorbr5VolPMJFK7QLUwzfy1PY25O3sG0bkxlKcc1LVyM8YbjtmKMlZ7\nqJfnNWwUUjBBywyiTiVNW9+i5g+BKnKLubgMnTR6t0HyRO9usEh0G0Q+VN96\nW4wW\r\n=MrxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRCWWh0lukcOOUfO255FELgkiibRKvwwjFGvRgU3BfoAiASJrm48df76LGGweZEH5nUgzahCuNm/n15EBeshOKfGw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.f1f34ee0.0_1613161060552_0.3592189814776574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.d84df029.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/ripple":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jikGN7MaMmFTU26JztULYkssCTfV0RsqoR+N3MDxnWd4/qjaR9uCjKk6vQczuH6hqSwSA5z8nq8L6OCISgSaKA==","shasum":"3f94dae908113af8b30026909fc7b5ebf0441013","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.d84df029.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBfoCRA9TVsSAnZWagAA3c4QAJQg5d1lHpdrJjfekMfH\nXxs15HA2yEypVi2PgsEKiem2hlM6U8qI7RuzeNxq6i36aHGl1xw0XyY2GXwq\npckxPVaW9RU4oxwYLQZp57lrfJQ6zrNKt7qfeGiiCrK6dPBqA3lXhKWMqCOI\nRacHNYn1oiRunfxWWcRyE6CV2/dcsWJdpyPHvlhW9F4zLhcku43NR/xpOxZG\n7Ghv8FtErMK3OINLGeBbaVNmmtyRGq7mjjrm+JPm4TEgxEq4WkC5MGIb6AeC\nS/w1nme68FzQMHkmk8A/Rn/TUsgGmmTnLcpvZvUcysca87NYjpkvDyZP8CQt\nsfO0kA7Z93iqbAuPQ+AWV8KhaUZApg758BWmq1WytADP54EJkF+AOeoPkE9Y\nQYaMLduwV++1kfI7avFAzsgsV9CsLudyxnkjmtT3YZA4MQX0w9HPw3j9ee1e\n3VJtKvIMSLJy22mq2PzvqD4Vknzf/zGUKlVHvsl2Bav8kKr/yFylXUOnw2Lz\nISztOfG+5bWHuMNtHBEHf1PQxseKwUUjAoJfbQo2PqRRsIvuHw/YyBLcdtHB\nb2Zl1InW43pwV2LbOCjaJkQ1hpSDaexBCSQHsC7ZKIxyOjqNQFl+hWGRx7o8\nkxY0bg3q3Z8u846mFIXYXKekASk5GiZ4Svd4eInikYB51l+EmJd7aHlQeyex\naO8C\r\n=u9gh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIzGYSSdJmFXAsbHYAUZUFytPZR92DZ+Fx2SrnAdWIWQIgIN1rMwf2lJHy7ilUnCje7/rnapYN6dSxJIPBuSKiknM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.d84df029.0_1613502440461_0.2611032381435454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c525f471.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-lwJpPpCK71Tppl9OZAd9DZFB7/CJh2qu07Iqb1jPW7f+ofBjLuvQ/DAaAxKD8XsAvuhs8hNNQHb3vG/XRygbqw==","shasum":"0cafcbde50c869308dcba7eb306f0fbebf0e2116","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c525f471.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYIyCRA9TVsSAnZWagAAG0QP/3fa0+wG9r4puqyWBLE7\nry0shPOxIUNu5H1+yvmOgaYlwB/dWyhcJL2HINd0O/QJecB9NtKjiy5fVDwJ\nz7rkLewbBkoLWysKXgUoinZnxRm9HJ3vWtJ3NHS4i5s1UJf6cT8q0v4oCxp+\nRwyYvTBg83rbSBDW6tQCYcwKbve0lAnJ3xSz+AqLtVffjrm5hPptMUC8McKG\nN1O9onkIRRS+Z7v/U88zPHWJv2W0AwjdUdQijfPTS0tQ7m59zi3LXvvNAgjp\n+w+T1DIDlVbZh0YQkaok8IcBw5RoEnU35viHDIr+wIixxJq+tmiL0gxnf1BY\nyJ/+aW50fx4bY25iYf+gpGeXWbElLBOFqdCNBF0lLWNzVE+zVWYh3i/xCka/\nNtlT9PaVdQXUYQjsEirFi9goEGDG2fB8yX2oDiy2Jv89eBA163tg7YRUFjYu\nHZnLHbf0MD9lLccyJdK4zW8mlwSoSFrqJ0Y1RnZbVsh7g0q+hziHhcAH+V1g\nbMujRIARMxRL+DypfdqecUVoa4PkceVHmgSkRTYg/ejbxSTey1OfTPq2uBsw\nyShX7RapaqNOiPxR/U95sPo6VLN5bXmCNHhKAOfD9Fp9+feEs/kfI29NmN83\np+UyLvLD1oXZ9qwTfjk/cn8XKYCaLsVVl6/UP5TnH4QFLZk/w/XbiVEt2me5\nmvCn\r\n=TeCP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaa0JPqg6PyFdfgWelbZF2MonA0SC423oGku+rTDX6QAiEA8j6BEagTt/iS/HrehZQ3Ijvs82SF7kEKN+7ZunJE5L4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c525f471.0_1613595185742_0.5422553431619839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-4Z965gF+PzdEi8l2iBTKskFIWBLuPHxjj3e00h5MQ8ZdJMUa7g163mYR9zzl5rnr+Jz6c13OclSvOlJN4uvSrQ==","shasum":"373a67550620aac71b5039b39f168409fb4b31a5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.ba7a1b35.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwKuCRA9TVsSAnZWagAARLkP/ROvZZ+3dah5RL/BnLsJ\n/ZEPZpOaGIVS0QpyulYX/VTN+zD5sYboNmtQOkF+b4s6TlJz80fHXjR0r64m\n68/iPvDpj7BD/udHqzlXkuc9mN1Ui+EPjx21rwbLgkwWOaMpIBUZfMxLwVtp\nbbwphpnRBXPm1e51pjouafWGPlctpyoxyuyoC62EYbiXCYxrd9lxASJLD6Il\ni8OtpiwP1HV5xPaJXreoaYpiv0niONlBX0CrM+vdHtJyLrq8/GqMbn4+OqRC\nhI4x7Nkjh4rKReF0f4UgeWwt0OTvBFvF8LJ/rqVKtuO8fKW33IQJwA5jDLx7\nBghLDu9M0KIGDGwysKAxOgpaQtBfF++QWRr5XC9W6hvTZXY5+hPsMHy2AwMu\nBkcgWzOdZEnlOxgrApinHV1m1+Iva6L0WKPnDubeBY37TpVzhLWG8omLy/gz\nJ5HiKuxaVXBKo1Z1lOEnKKIhb6MiCKH6YlUGXzETKp1I6MWis3LvVIc3l6A+\ncCIjuSfXF/3rqEyzuIsTm/f0tjRo4/4NeY9wNTLhaqnOlRutKRJ8hFLs0ZiX\ncJxeu3GoWsLuvoN7xc8RyHpEEOj8tBGb6Z6VUMdAAbwdb5Rm7kUzh6uwSeIy\nGTpbffMEE/5qypJSZE7QkULEERY1jQxlCGVd4Ixycg/rQvi6lOXq+cThjEXF\n0lyE\r\n=a81I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALqSbmF5JC5RROPmnFka3dqemNx4KndkymduszrzbyCAiEAzkD/YNMlUNb4hctIT/zq6w1WXoB2L0gggAspiACTOSQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.ba7a1b35.0_1613693614231_0.4889437675725443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.9a566dda.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-2O4v8yOuiogcfOLLfuvRB4ioSB92tadHdGwSVMsj1OWztnEKYU9ARPvMv3BVqMoQErGbnCPSLwZn8N2YVk6P1g==","shasum":"0f3f94bc12d1e6453c8a416b2fa6435ab12efa66","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.9a566dda.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVrCRA9TVsSAnZWagAAlG8P/3+Sp4EkOG58t9NMqcnM\nL+Jo6+MCJTWqCjyrMD3M7S68E7rkZviTEk0zQSKP3DaL5CoV725TW6LMvcOl\nBNf4BNgeZIMy1ZcZtCb4eimLnbKKi6Tiz0NT8+R6rgIRzGQfV672ETXs9c21\nkvpc8NGgeeHKnBBvlo07V+Uvr9zPod1M8KdUVuMex5iVKjiHJ2pAWssDJLrN\ndOhSz6EiwB74gtu9S2+z54QAwQ5AZudeVizkunVg5S9gHBD0emrBSc33xYbJ\nuCpoIQhLlv9vUzvAuaE5/lFOpH676Ufb5te2158vuOLQRFSvnt12+42EtmUQ\nX3KirnmAFPgbWjvIiD1TRFxw/wcNdZcuRh1SQj+ry3ie2v5+41i9NCyuVotG\n0mdstL1BbPhRHJWE5SC5yhvOCfCbgfUt0Dii7ZpUdy5olZtTsgPBIP5hMPqE\nIKy2WkAQHXA4OblKoQ5/hsbh9AC885EHTNO7yz6kl25xAwu4syRn1tCihKgZ\nyyey8WSzF6rgTD9FnQykbD4NERjOwW9g8SUkHPP/BfVEOkXkSYwxfOJcBCs7\ntWAsLhksiXNrN6WAt4URLtlWM+DZvTc0IE/bAkhR/YQV4GqY3TLfp3jpFr4z\nkiQNUiPFvryGc1kwhL+DW3ljoqQPeoLcZW97UwuQcsuHWOrbLvMWtqpGvc/M\nCVQJ\r\n=mVuS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICb6g1jk/zQsRTaR7Veze2JyYwaEtJkL0DXjLOJwmkXSAiBjFxlVBiEBb3S9jfnlQrpsV8WbJ6tzZjBjvqz4exn6PQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.9a566dda.0_1613759850441_0.31067761016661133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.55addb8c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-m8AcXL9O//mTCQsk6WWEgTLBjG/kQC7j1ieF0QgU2MEOT+1ZNrPXHCqrZgMN5V4t9XQdSPHp3RfFb5gLFNElBg==","shasum":"10c807f2a4efbf765e9a7f487c3251a99c7455d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.55addb8c.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVUCRA9TVsSAnZWagAAFTkP/2sXJFP9MpujPQ86jVdQ\n4AYD9b0lcRjK7mD7bXditoUk1PfmpO49upfIWjN5oBiFLtyH2nA4kNYPOnbn\nV747DJCoe0aWIeYiBvkTDYFU0vO6KqjU+AI0rfqjvIUN9othk7l5I3rUSFqY\nJ5B7tmquAMoVQNVpqrTmz94d2RcjsmMa8kqCKT+DRyrs7bouSOS+OixJe0JA\nGMi/yuVp5vW15jNisyhlFe06mmZfxYSBP0QIWgfvvyVf8pFbVKMuTKFeKAEP\nuc3M0LjdLMdBaW4v9slJo1116HuHX7UXeFSTGsK0B3FHa7ZQxeU9EEqhgRgW\nJ8s3EQKzu/ATF0XT1/wisQGXYdAA16CE8qCkeLai9keogyQzXF0WyOZp/Xe6\njAwCwFswK8qtLf/lz2ReMMyPlgYvQu5JANwUEhFPy74/9AyRRcxixsPMmMFk\nY5lAYmDOdvAuhsQxhrZm9PlLyfC9ln1sqOU7x+lI3p+vHW83cM/IpgYygCO/\n9xD62Sqdcc1BJXbglFenLmZ11gL/ILo6w2QrVBGbL+RARJE6oXq7anYoFjWG\ndDqH+tXpUVZWdWMzFY1N+P5nEj1m5mkfWw/KB1JUiBvQlO3J0cKpc34ZnFCL\nnoAseu4pPepNVf9yLb58vUJTmyjUuRySiEaynuINVPsr2V5i/tBNH7h+M6Xn\n0bGK\r\n=gGHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZLHthpwlQ+Ua+GEUzUe2AVgIE6Q/y6X6GzM4NVzBEWAiEAiv4HwscXCMex9SCZKMTuBqgal/8HSNV8klqC1LioJnU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.55addb8c.0_1613772116465_0.696309548240645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-b4XrPpvPZ7k2MjCfCgNhGahlLvqJdgchxKWjT2HsyFpSvVbbKRuewexghLVRHCzVg20r7bFmUM3TmPKYuTyvZg==","shasum":"93ec2b65eba9a8798db4f11edfcb72a70c8711ea","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.85dd5e9b.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYOCRA9TVsSAnZWagAAMiMP/0oelWlln5R5Gu2ct0vS\nGQ5ve10U4XkqNp84Hlr8DqZV3aithuRKvmaHT4URYUtuxFm1rJgS+N8rz1ZI\nPoskwun8B20Tc4yVNUgVn9/3PYz9QWQWD8xX7YeAPiWTiGIy5wg2w1AqTHf7\nRW4is5GDf0kqtlYs/Wpb+WGV8MUYInCOjFNl1zVvghrigPtv8wjWpF4nLnN7\n/hGT6kDjF5bkD/+TiYDTgfm7L4sDAofXqPzQoQ3vPXYJ0aVjet4+THFt/mL5\nvSTF22NVDfYJ4Ah/KRGHwGvKI9rcCezsLWbdHD8a+SmzhL70vPCp6JiRApZD\nn3R7LjbyFIQqeDiHhkybfZvGJ8iSHU1uu6NntJSyU9mq858IVH9vAGrTHMHS\nZ3D5qWT6LYk45Ge31ZufaSjTO8xitGoFcWf2EBUKUI6Yl/6rE+eo5Ee0GZIN\n+tUNz9cO9wPjhIuZQJRNbsTfjxXlRQCt/7azKNozbETlyzy9HfFG4hsx9ONH\nbT39UQavohfxllFexw5VwBuvATlC4vDmnDjQ+yAmHiMfFZt94D5p7E6jDUM/\nQQ9Bax6zR7diIxL56QP/ZqsZrwQCtPhYS6arsXK+uup0hMcsK6FGYPlxmaOe\nzztm5fUI8NMbp9dWtqcWfw/XF5g7qOYeB8oCVfNVY47gOKWEdVchKncmp+ei\nf9MG\r\n=dnqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHafvEZ41PfU/+pOORdyucylKRS97qgr7t8MdN18h7gaAiA6ZjXC19oC74XRcBOJW0AOQgES59/diPI8DoHryA4ekA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.85dd5e9b.0_1614046733588_0.8379571081205175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.aa3e078e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-216FcPiER8LLwFlH614m1mmkCvnSkQVH29GL9CXHdNMq/gMllDTCWUDDMI/mhB9LVyDblBULxaBZj14YPyQ42Q==","shasum":"60b358af318b260a20441fd9c3c051ce038d29ee","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.aa3e078e.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTf1CRA9TVsSAnZWagAA8L0QAIbmTlZw4Un9rV+wZXBH\nQgc1vjXQBUjdkaERY6dxeU5R70jmv7OI1y191g/IahK+ipe0T6GgUlUXj8+5\nMeoW5GJABFMILIAUvcEspBFVBRhBUGzK8xs0hSSKG0gqbL1QvwVSfKboLNTR\nuXHt7MzFWawvcV9xPKEb7Mp6223TqGqDRD2T9SjV3RhR+vMrMjrJraB9Uw+7\nUzoauDbZbFW5QjSFBnt+ZlFWvZ94eodSWYykKslM1XhSRaI7oMEzDsW40cVV\nBRrtchy5l4fzHooapaDETUX68R9Ea+wv2j2aRd7yrF8AHyDiWeQ87FbFQTPJ\n68ppQogFlc3CEs1Pbk3CzU0D34QyIbnMyLdJZFumYNzyHDDhtiusXoDNBV1c\nkiEAEgUZDw+TIMJjdIBJGEfc8MpIA5LegplavRaFVv1H4huQMzLpQYD3GSZx\nDbUbbt5aJXL3KMvzjqw3X5gv7lxIZKy9WVXcwJrmfpeLG6kvrOkvIj9PEXeK\nY/aM7pqEMSq8WlhkTzXlkbsg2h1292a/FbReEsPSr7S/mYXcOnAcLFL/1Hbp\nIVSIulgKKSc8TlJYJyUglWRmGW/xgpPDxbWsOx5bIELbTHBcdvK3ulG+HP31\n8mX3A0SGPpO+kKqg1wYTTJMJd79kNM/IsK9QL8l8Br4/+/tBimrUeqVyPHmQ\nA6yv\r\n=CZGb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpNjPBax5F30yvVXa9PALbMN2mayJZIHjj6XyFg+88tQIhAOILLve/EWQOl+h5aDxbDNFcZ7Li6+YHcHltjskrLbXe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.aa3e078e.0_1614100469390_0.20834499192803313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.dccd254e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-hoEARWVTBT3TDaHurN44214WhpZM8IRuEUWX26x5VaGPK4vIFk026icUv6mygLXLIqsHjWvTDrfmGtbHECj54w==","shasum":"425dad3febf29eb483e7a2fcfe42ba3599d5bf5c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.dccd254e.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOdCRA9TVsSAnZWagAAxKcP/3YKSx8YdaC/RcdakE9J\nXKjygGdEU8QG3AlFYXfv+5paktIHuHWY8at4XX3v3Wj65cGZHwBqXvfA9y+G\nq628hsUgs1yn/ZTVFkIpyOkBBx+kNuobdDIm32SSiGFNNtNnjA/XNEbgFPu0\nJOa154MBgCiX7sQW5e80Z4nI37GZKDT0zCJyb34+V5/4RuTYOpNpiRLvs7VU\nHDhU8861GQi4y6a0FJUj3jCRkkr8qTCd0joiOW9a6hBRTpdHpNb14foJs1xt\nNEGP9sPDInID6pwLYsLId6orQcSSmbwUSTu24ASBCthYJvoFptbSM0WFqAg+\nHxpTCLDGzeqjd7DsZKqMm0jE/LlnRQMOb/oO0M+1kvVlCpOytc3LVj+3DaIb\nyBTxxe64UvgiWAXrrqY4s1gtgWboLV336tUo3cSZfHMRydEkuOnyGnLzQqq2\nsYZ3kDOrrsg08vwx12HIKQuZE7L61S68bjrAldFmW44FWvVUOWNURSpID2fp\neI+BqPjAs5xMFaTFCNczMvXal6yiiUKj1I4Ih7kye8ImAOnna8UCvoR8I/AY\n0UiC3H4tNovdvR2y3zTZn5kXfWDjoasJKKba7X9DCndvtIzqEa8JQQGpwdOx\nQ/H1ZZrQZzzFa2ew6/Od18lAtiPf3rWza8bypz/toi6NGaVKmR3P4Cdy58Wj\nc+ch\r\n=2DJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMrQudvO/Ky4IB2GmuADXbnZF5IlT33h/+Qtka4qbfRAiAj1Rvr7ECUIklWnSvGcxA5ssJUZDz0PAVG0Gmv7wBxnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.dccd254e.0_1614373789202_0.4887270631115366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-RW6+yhDJJRxMEdpH/E6XAmSjP1C0hCBwoEd7G+r9FT3rGguFkcKnqAflGwZPunfBTbkqQbkKauwnHVyLJKMEjg==","shasum":"9ccee199e5c5c1f13c86c2e23e2ae9e7de8f4707","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.7dd1a27d.0.tgz","fileCount":19,"unpackedSize":76473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQQCRA9TVsSAnZWagAArRcP/0UYbkvDa/IaAyBurfHM\n4W8MSKa+W+gooRRVmAhrP8JMs1H3fsk6eFGyBdi1qpN/O1XZERflX+lnWemO\ngXvAAzmTTiETn8Sydj3E7y53Q6+wbsVivJFcpzGtVgl1b8zIZTlduKHuWZGK\nUV9ExLDHEbfiq21H6VrwzqZLoTr8H6/Hx4qZUS+95KcysyaMN9Ha0xpMH99x\nOylQ5o/G5wAPjA70tpTNAYfvyKJSSs9IwueBZHiQe0nVb73L0mMuq3l5cVhA\nbqAu1FbgA6N0ju7vfNXWS6RDtq7EbP+jnOurmQ1mPtfD3JWJ9OwA4bmhOX/m\nzoNIaWHpCDd2cfYLg/rucQgAhT92GHxIMANHUy7meGlLVypp/X1wmDeFHQAY\ncjqk7HO9XZRwG+v1sOZlMQFme0b8JpSJzV7ES2Z4dTstP3rFXlUHQLB/s52O\nQ4fvCZvAbqODqnYgHUbyUkdJynM8eYmQjhhggy6HSbd1+vi973X3VsNWcgf5\n7Zf99mGbyoL/yEqk2EWnm8GfK4HwzPx0mW4evuqSkfpoLHPJMzhT7FmQcsiS\n6pQGy8rVMVhvW8kZuY+9/fA8JPaDUmVbIglVDtg9iJLO+B4GOAob0Jx780IB\nBB388BF2pKTBaW+mvI7f1xfLFW67IwKFGpWIUr8ongeFmnbJuUtwheFbmTFt\na2yY\r\n=YKOM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9loF/LMoY7slBjiGz9JhBOF36m5/SQLzzRoJyBW4VQQIgGXsE7Y1mpcWTGc/n7zB+MgWPLoC8cujyo51z7sZonVA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.7dd1a27d.0_1614636047281_0.871789252409285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.12574572.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-wmKR61UDn+g5n8sTSlho4p3oBbVI2b3f1KiRLRfZvytYM9YEcIoQ92bppoPepHEmVA+ojMGxjJv0itrLl+8+3Q==","shasum":"203e95f0b8a71ca7a8598b4a516e81ded77538db","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.12574572.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAQCRA9TVsSAnZWagAAlCsQAJwYDVHWauWIIq4fbBqJ\nrLk8U4twMKUTyQCmaL15vNRVZcaaxrtzLyfu7iL69uAv2sYWNddgickVVMfQ\nkcYwSyj+74ox8yOrtEUXG6V3CiaK+sMwDFTLNeBTtQ2LWYsOC83FbE+o+vo6\ntdz7W+d5NVwNrJL4HrKYLePCCd8yccclZwmt5TSkCizvRYdrSPWatioQxx0u\ngUHEo2PDvfW180YzOjisQHjlhxzhzo6j4zkV35sVnP+6PdjQ5TbBvF73dJbd\nvgcOfRz5AdXMG25RXJ4x7yRI3oRxeVoeiPmpnqq7k6Rw9L95tLyf9xeUDzAm\nY5ASHFVXkup8Jvo54hIWiaCydEg110LudGF+6Pn4A/pgoyhikc20eaFF2Mak\n4nNmuQwfuO5axa7CphzfNr/6DZ52ycRGhiFkT9oUves95Df6wicabjCYbOw1\n4OivZDW94CocxjvA/u95ena1J4ewvMMxZrMHdr/lPuo+9LCaH26KXyGiE+K+\nC3DbZ0MiKg7rTvnGXFEc6diUAVktqk3TviH56/KnJJF6gUYupOWbXQB4KeEq\nEPhM8EcdBX7xSF+iiZrNGdmOH4hVh9hCGUm3JgM+wX8gRI9odI622DUXJnUk\nDXv19hlbbi0JZDAk15fQoBZeNWPR8iahLZF+SpPWhiusN+fG0W3K7f4Yy2RG\nXt7M\r\n=x5bR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/l7fSnoxL9VSo26a4HurRlbDb7e4hDo4OLW3RtMABWQIhAOFLdY43xznAaA+cBx4+m/TCUiwjV//Jk/q8+3I3LMzo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.12574572.0_1614716943548_0.6667026479653921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.1109a3d3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-rik+n2T79sQYV4JuRq/wEj/Jj9zmhKwopi3Uap92bAE+DoSoiLLaG6gJTHHgiB1vI97L45EjTCCKInl1qNyWww==","shasum":"ea50daad8df1bab40ca6b16743b703b7f442e5c9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.1109a3d3.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqE0CRA9TVsSAnZWagAAlm8P/A5S8FnAAeZe1a0wE7kg\nbpgD1z79olu07ublpV5ea4ugN3t7JGE5X6jtGADIylGcHpP2FKXNdUg9Rhk9\nYF03VAIDtiKxglRXKlRIG4SQ/ONeQW8414UpvahX7qtqFR8qIO+UemZqWdfk\nCJY1hUxIrf3EK04hN2XBmMXbtZm4DHz3B62w+4VZG5ElaO8vX23b9ZGwNbjN\nhB83HjS8VmFcrPG1+ez5LERq81dNSUz9HkXgAD+LFxMLFFkpWYIvcFK7DUqE\n3VVdGD1ilEvsk0ZgOsYZ3K2eFDsczU2EeykeGZpJS08TcWRQtGLqPUkqsqEC\nR5RX+YFebUFmwe9RF/1lknb3haGlynyjEfQZnE+pwgWM9+YHzrE9VTWlVpRR\nHJtvCaTUccRZ9ChpC6uP03888ddq+oPorLbdilb0VCraAKZyhhXj1gnrUch5\nHQ0qek6oZXsE7g/anyFNlN9Y4wbTBv+3ixcgB+3j0sJEf28iN4Jq2d0XuLk/\ns3HTr7wsZ2+A3AQeQmLS1qpoOg25dQeS4kA7ht4xIlDWQkrAzqU59F0xnz36\nXC/AGAdXgKmqF02XeaaABfWcGfzKCjv3ggD0fS/I1YZhzrQ8kTpBsnmxBGMK\nfifZs4EYkOw9aDG84sD40cQZXyVPeg7k6XOx+/cOF2X9s8QUIXbWlScntTyM\nhJDm\r\n=Amw/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHY7t23AVsrihvRZc+wIqXUdZ/eOU69laBKSHmvg23Q6AiBGgiWP0p3nx8cDNj9De+Y+9+YT128WTkgq8bSE/BIDwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.1109a3d3.0_1614717236018_0.9887589666785797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b9cd8739.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-H4eXeQYlRNTPSY/xHoU3cDkYfeN+e9c1mBIzY+KwsFX62e5dl1P8rOfQwce1z5izU4vA+eewjoaptM4/Y97Z+A==","shasum":"a81aea3ee23ef9f7f2512d154ae82385de398f7a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b9cd8739.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8t1CRA9TVsSAnZWagAAlsMQAI9ILsXt+FzUeaoK1PyU\nlZU7rfy/eAnnR0lj2RF+qbJT0FwO9r6ksGA50AC25G4cyK1NRf+g5McubpHa\nW0XC0YZdQbQC9VC+5Na9rWTjZEcG05Pm0hAHX2KDXT0kkfb0CMmyKE8eELXi\nnuC3BJQVHjH8CfeZkss0pErzM+XmO4c8m22XcKtkZTiUu6rJQgsnHvS+i+w0\nXnIPxdrvyox6OZueUe61tXqOEgTFycgDoYluqJR7njoOzRGEKvJGJnA8clA3\nqrNU8GyuaaZbkDozRBSgiFx0TQczQWe8oEyBSloqsTl4IFY0QW8CDCVSKzir\n5LiHSO75thVJtXZamsK8T+uG7K4LmCuauJ67NBMX41wBm/WMZxLftQICXBPY\nFL8+YIifG7xo9s9bmNqnT+HOztWDYMh8ZgKirgG+hB/tNtyLL0k3BIOjirMH\nVHmKO1Yc8yC+/b28HMOyn64UgH6uXlCLDgSl1ESd6pQ5No7ea+1uJQtrAXlD\nPumIIVRgWG0JPG5uS2n/dxmi5ApfrQ5d7nBBfX0WrTAGExBgNuIp7OkoLsUu\nGXdh9Duf+wuiu+oul3yM8YGrW/nUki/QbHWE2/fKGuW+aGl0fvC3E2fponvu\nykXQaNq946EVBqWDUd48E39FWBo+xW43i1dTKbaYN7k84iHt5ALsqzieQxyt\n0CIk\r\n=R8f8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSkcs7IDgdR0mvs+AMYF0gznU2pRK4kwK/nq5dN8YuWQIgVJsKQXmlC8PsVXokqtNHXPnky96EUQvF+BzOwxGiuLQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b9cd8739.0_1614793589541_0.6069438371099771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.71ee796a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-CvEc5+2Pq2I3FXnHUnki4oKagP2Q6Xjc4g+Ln3Lb8FbebwO6Y8vducQgdySlO8W/g4mzSem9Hk8Z/hsKkDX2vQ==","shasum":"934b173b2eef0a9e5460514f5e6551668d9de62b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.71ee796a.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+09CRA9TVsSAnZWagAAksIP/0y7dKDiO78TanRvRDlK\nUDXvd6gglazQusw/bmbZSgSN9bJ0bY6s11UKXyrbL/bozyahss/s8mvhRA1E\ngzRavKDSAAibXZRPjgrSy3japSIsuXpsIlurBJZNx+jQ5cgrc9WZwT3HF7me\np2TcVz8zOoqg41UG0LGTBPBjUZ9TqCGH3lkCVNF9mFl6rJMHMaPrHXUXshqu\nBKF4kE5tcAHa3iTZ3z36vuJx2691X0McyjulPohJBt0G0bZdv+QGfeDN619N\ntDXc2rEpX7z7zWfQx11GVh1l09L+CKYWUqZPstgjvxl4K38bJgOjvJVf+AvH\nsAbigIWI4eAK0PZyM2uTSaELwNFX0/FO0z3Ql+GRoNYZkDzMYAqf+scxWb2f\nW5huTJQ15nImvzSP0Knffb9PR07AqVbZ5unZ5OQmrUb/16NvMt7TsE/5YgzM\nSHYFruzQ3PXjk2DXNxWMvT16CzNIcJMGnKwqqJjI//bFt4AGd61FcNp0Whbe\nUnz/X5uAcAUv4oHlUhk55acHo0cQrHdH8MwZTyBBWxzQCGvkTykXi8xHSEIc\ndTUj0ZdjShKYD9F1fY7yXwze/5ir3KTOE7g5oUWhpzN+uOcwUQgJyonwPUc2\nxvu2aMeT34JzUZdR/G8+Hd7P+HR40OQqssStjeNDfqdhDow4r/K5OcrYFJ4P\nnJ1+\r\n=A0HM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBXCuDGcSVkYDV1McrGQ0ymEQKd9IOOwCTlS+jQI3FAQIhAP7xaOQSJ9QdLeYz6tnAeptPDyD6ej19+wqtXhZny/N/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.71ee796a.0_1614802236150_0.39110644570487363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2be191ed.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-m7B2TQwZ+6fQ0vR/T5yHJUW7496X1eaZXORRrfiExrrjVoB3Nie43CxtIctDG5Q/wMWYU0IWgjGeHZohJssA/g==","shasum":"f318a94e39141884f0b3b4e591efa28b7bbffe60","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2be191ed.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATJCRA9TVsSAnZWagAAcrgP/2MDFDYABXz4Zd+UWRjn\nl3fe2Zf0+VaoNW6LFKvOG7lr3djvVpmT1GblPyF3geuhROICsmw1xr4tcsV2\nKxEowUcftryc8VrDxjmFcOdaMrWyWJVXeykszKLtSxCEbN3jpFAh8j8i8QOk\nwMj446wrfGkBoerXKkxULX4XTsTtuLjzsGOXWDpL5aQzYKDHs6aW8yTzZ0jE\nmXhlgl0H6HcgWWGdVALn9ZygEVOgAkLtQRtPa6i7VV8kpSTr/ZioHXzT9tlA\nT7unTL9BevwPylHz0a/byMe0ebGYeJQ9ZN1ZI5V2ZC4RD2rVR/9NFSDM21PA\nSvNdB5dZjzMs7ItKqnEkb4n8S/0yv2VfZdcnO2saDpogq4BT62Vsre5VMUZD\nlHIcs8njThgX7GgxW9ot4ULkNvb9UZgIG19DLUyKJhnMhE1ih9AHCh5kw/k1\n7DnNxqX1DroeiARZdUQzYAVRZ5VWSZz3t1s2yPgTYTZoVdV//hW+tsfOeqRq\n9E3pGvNTyZ5zsjGsGXWbLye3OfG9aNsvkd5nAxJz2xmi/zGTUnA53YmqmIGJ\nFkoegweo549HkwUOCMnnItudj5Fj7UDc/uYsn5zV6GN995zDW97Lg+9P5d/f\n8RiDXX6r77/WRsseWhh/H4ulX8WjTfFllW6HKaqAxtaeJ42Jsz/H+jl/aOb1\n1nh9\r\n=eHdi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8m35beVNfRuTehIuTvu8d3ew6rSWb1mYePQ42ipudHQIhAPpF8nP2KYy5EfDB7UqM2NmelwNPni8+E4OMDSjU7Hbh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2be191ed.0_1614808264850_0.03583244645696615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3jfGJy+tcld2sGKZhp2OhQKVDu8oL2piszSafR8OqMdFJG28rgrEEGHOjFQcIg7XeKHvm8mvkR9hYQvYJaRSBw==","shasum":"4f37f0b94ae868bf176c8ab5e0dd01908a422852","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.6dc7b06f.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmeCRA9TVsSAnZWagAAXnUP/ivKIOLiNYOg5IKzDn2Z\nAqSwn5d6R5KJ8jB4Ys8uv+fnA5oGRi5dO2scJSInC1qGSiCAj05IczWTIYFP\ndBW96+rI50+p2EMh202sEGgBVfQSR8bCXnMZjfS+sNZlr+E/HaT0tPuB5Ttr\n/FEcvmlur7XmB/yhSigrMrsuH6pOonypuEZAzdR9tWXjWg5XP6cxxFqdkFr9\nO08VxZxF+/HjCimSo2eZj+cSRInRyFJnsQ5sI03mzk7oU/xXfpt+JzL41g9H\nRBj/Cddcd2MEzi4u2Z7J8NZjkH7Sd3TDSL5CBLSlwor4FQMBpFLhISKJaJLv\nL1Aet9eeD60qvpC4Fe4zyT9L/1Yp2hyxLe1yp8tLlQeD7y9E0NW0vAOembdG\njpl6i4NUVSaiUkFKevBqv5OGuhnVTMX/g7ZPnB+XkfMi5BsIvHgf9ojtjdSp\nupnLg06V+f89zf9OLmnjYPyszbYoTMmhyNqxzgsxFOOzm/p6kmzM3elXlcAx\nwXTXB0Q4FgqVSpm1YQD+Q5UO2ZhWwq+ulPk7QIoL3Jx4uJggzJGywHcH0Dzu\n7l6IK0/3mKCzndi4XprBNleN68edVQ2TXKG4dUav4yEn3BVuahQO+Ojr1RLN\nWoeULrGBCO14edeIj5Ndqg3EE00mOqrTfxuz1w3kSVYZFHwCgQ9OEsTfY0fX\n8+9f\r\n=Ywt8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBa07/hM9vQkAtVkSqTvr5vEmCcFpLK5u2640mP1dnMHAiEAjJlgCXUoItOdf17IdaWrqddgOQA3n7davVtqSN3rtuQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.6dc7b06f.0_1614903709523_0.12165593992113655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gLltFI8v+HkPIqRDmSWADeDC19yZImsrdpOJj0iW9kXI108fuTzhZBAspE8gmDor0HJP4+ICqj3IYoyiAnRUwA==","shasum":"96f94ce239e9c13dacbd92687c40677a1b4a4c0c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.24fe7ba6.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnWCRA9TVsSAnZWagAA1O8QAJz7X8D6sXkCHxRxKL4u\nYaUwCezR14lRK8hVZ/JeVvka+qD/csvxUEHLIWFI2k8ktF1LcV6kFty6tv14\nYbM8AQqNDVT2aARFF7KDeKBhdL3Yicarv1BiGbz/rJ4vKJWT7GO/PVoNF75G\n9DhJ5mvSvCoJ8A5wwiQnapOOKCQrks+GNymUYmvSmATjJM17yf9Q6IBAkfbP\nPkDtAgXptGmjyX6YIkHvUp1XO82eaKSdbTZBfcISbKjUC4yStpOVLawTu6DK\n5hEZDHwZE2zQ04ceT6f0zfB25VSsiAuNIzI9aBe6swPdCfwUDFtwUQsa4Q0Y\njz22swjZ7wHlcXZ13WEnTyb0LjcEQDO0gbIaGFP1yOZyZx5yI4du7tOoKjaq\n55Y66tDiReKpmHbhMuy9QE52e/n6vG/bp0a927ru7zcy+YnHoDSxkrHWGiCk\nJzloVkxGYZQqVWq4Ruu2t8YGG6nnZKyMplAfprZgvFS9+4Yj6p0JbOya6P+C\nRckEknmY42LblOcMuI7y3pHNXmDSEe3399puknpxE4MTCRyA2Y9TKvnXlKGK\nAciruMjx060mcYaQKa0K+PjxxP/EJg3Zur9koqocmu6kQjhd7+K84pvveHZd\nLSCThB4ci/54hc52ODw75ozfHcMctSJp3rvcOfzf3UG/rySQ05JIiZOM+XBQ\nGbKf\r\n=QJdk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBsNBB5AtmGFvf7wBmsf6Vj+t4JDtAPehKIvAqMO5bywIhALPvxe+nKRQ9pKXUwlqmz12KNy0IFobw9ghHKaUFjpHf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.24fe7ba6.0_1614965206120_0.2365110714940437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.12c477d1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KtI5gPDEXU1aj+QcuTZ0CW8uZDSUKx4d5QCoLuGPlh8NIRs3RQ+L/+EePdGoCbUwqmQTY33fSEKfqIJzbBvysA==","shasum":"bccc305500a4faa81294b7868b6be30248b5aa7b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.12c477d1.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPQCRA9TVsSAnZWagAAPtMQAJBEJl97ruQOscHk2D4i\nROlqJSdfwuD8Ip5XYAPk7G8qMXe0mTSXJlu20edYchTgvjoNNkzHn60D5/EA\nRhx6IGl1+zGJB+kwzIN+vN+RkJ8ZeZ5JwtHM0voIURbpKhsv3LtKMqEnL0QE\nK1RxbE5xOhAQQgzxlH7WaUq2+XCIxml+JXU7erPZ4wcEwBZHBPmwXRs9C1gs\nbAb6d9/XqYFvmzFUq7dVnUK9v14YdNF8Ofwt9INMXmBV8om5J39M9k4S169d\nsOrvAi/36uJNsFiRsz1/9efzOwmZrK/V4z5CQf9Bf2XpTyb5k0DfzEoN4zFw\nxdlM1mYZQJnAj64h+f+ZuUvNEjfDLpYuefiBe8vAL06dcIRtbOU6j19lDs+B\nwkcD+xu6WoapO9THnONYYX4vDeRt9d8CH0DzFTUFGJFb7xZ33XbByD4vm3iq\n/eSExBkHbpriUdtdcfdP6C1IP7lIBycVt9JehcyxntBh37WG6ULZ+odOnWyL\n2ZjLg1w72DEbMcLG5hfSI8CXU1eLjRv86vSIxsX76ItNVyILuIBfRBOu/WXg\n2z2PrJtExxd/7NJ3yaMQusmXFtM+qKSTM8rL8Tm/px7YsTXA5YAWnOtj6r+q\nn7dYGBu/ZjmOkoFzBXaz49wxKRHStqkQoOVlNW7PPft0B8erqHBRkJ21TtLn\nHwG7\r\n=I5TO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcJN7miar7fenLnnBYq2UUAoG/Y5NZfeTz95zO9jwYtAIgeIuTq+pLa2z0xLGYCJJAzg3rlLKDmVI+7MeUQG+IraE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.12c477d1.0_1615242191979_0.174064665385107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4c38f801.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MzCDVsJ2l2Rm4XjC9NFWYCfLRZqRnhgDdbH41kG5Dz9CDbXrHrn/0+cS0Ufmw4Y3npuAqH5irIgYH/DLtHob0Q==","shasum":"64be594cdc6db0be66c9ecf66a602ff437bc2e37","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4c38f801.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIdCRA9TVsSAnZWagAA+O0P/ieW6K2aXZOaPcUiaUwA\nwr34xz7IHb2ZlPWJ1jfKlJywCzbKIIoqIIW7XhqSb9mwuyiBUyF3Txj0bVZA\nWnOaQ/mzEPgPBBJMIPKiOoqKO+Kr+zP35cmuPQftS43RQshqdvb27cFQGq6y\ngzzS6ZQFc1uxoZOmBORs/Y5BL0aPrHxf3co3oPb586PY9OMuv6OUokOEnDbk\nEKiGbeIRe/uXmKgQAJKPDC5Ve4bQfgsXn4WfQjCFs15tLUvd2gpFkyLAdHKc\nSa2KifgdpnGd/VaKNRLaisyNb3y583hHjLoVfCOLkcFjz4nhATcinLA/QEMC\nLwEEp460vdV2I1ukVLMlCDSz1L+NyYpgRwsuTSv11Dc1EVIcAtmzdfKGtamz\nIfAF38ExmO08Tc2SKXjJhd1hPosqt3oM3QbxhGY189rla9LADmU+SAjlhwTw\nRocPym/WTxiFDJN3srh8aA3hqkJefBFTQRDvP5hVD2E6Kjvuj4VRxn8RXbKx\nESvQdES3aE9/VrtklPaPWDqbb6mwcFkhHrcVC7u4Ep3ayOfeHcVBX1Z2+B3z\no62NUrDb1TutvIiCCZxX6CvUSmNjGxW2S4DTkqa6VrgKYpV3y+M/YxDheE/F\n0TK9q+EcNIWzy27N1xSakESXZjl4ZNH64ljgvscjnROKDlb7GCWlHscvSUNo\n5Nam\r\n=i2XX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaOGXPqRBS+HcxGxmAEgCTI79coMjf59+ur7fjD4DBAAIhAMy1JeCBgTxGUfydpqlNpLfMD5EItKIEFw1I/1OX4U4P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4c38f801.0_1615245852963_0.1682245955692241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.8795b83f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sb/cr0WWoPWVVi9rgRaw9wUSQtLwP6u5bREk1igi28OgbdmdO2pG6kjHg5K2fsD4j/+eSRU28C6x/AbZ58CfBg==","shasum":"67cfdba56bde4315837c18ee3ad7561ef303c761","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.8795b83f.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR73/CRA9TVsSAnZWagAAwEkP/R/ZLlcpKQ2A2exFPHFC\niXHZsoXgGFhwQDdsgkjxfJSM5uimHTnfgJMrebjz5+xVX1D+oaMCrzq7vMU8\ngqOq8vEeMAYGc5Te1HqYrFUx7Q1aMasRJGJ8cdFCMopnWCDcaoyPtjktdZiQ\nxpGcc88+7NxLOXv6p0C4FUJE4KVctHSm4fGcK1+H1s2Zz2/+sTkFoIA44ows\n0dPZUfGALAc6v03UpNV2+tvztLYwsLDPmYd/xc515RZbGuqVMOCrLl/zGKeI\nvIfnKbShIpk1NLNxYuupkKUbUyMcWOQ+JnDVWawD3R4Q7sJ43Er+4iyvJctm\nzQVAH8P+PzSzsPnOFwUqQO3UjQ4z8ICmsW6hqWyZs6pZSPY29vz89O+goRjg\nl50IXr+o0n79eHJqljjGV7cBY++AF3GLuOJBiIgswuyJC7ne5vTQrPiXnPlo\n/5PngWBKKuyYXMuW99pkB756Gdn4cFT2cP4kuA+GJwpclc/HMsKE5BCQXmeN\nMCq2QNSaJ/rkGkpn1jImArAZQFvO0ONfXEr0bsxYBROyB3j6efi34gAT3rFC\nBuZUOV1VRI8gVb9Sjd0REpwV470exKlfk5Peq9jCpMYTAOhLL+kgCdVix6KL\nNU39U6uac+TAeAzNWErTlCPFlbdhlzj3Euqdbix9QTUOeKUpFFUhQ7ANEBpC\n6GlS\r\n=DyjL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZgPK307RARsP9ScHgLcfFLpRXrxcechplqUt0yJILmAIhAJyueHsKZymR3qG+ODb5kxnJs4936r7LcAhadzHK49BA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.8795b83f.0_1615314431075_0.21890322022525655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.12b84cb7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XUCviEvutwrS6jynkGslSjjbxrqF4y3hMLsM5IGiuNZyzLBm8RfWo4c2JPrjWuVMs172gS+zqUQmfqQsGoMiAQ==","shasum":"a1796573b4054e33ac1e65cb97ee68a08df79194","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.12b84cb7.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWQCRA9TVsSAnZWagAA8/4P/juLlHu9jk642AfZqBmf\nYC57iJhOoqyhHV8DISpszAOHyfFNzPF2JO4NmiefnBbnmHVb4FhFlT12CK0H\nrTUt0Klq/4XxMf1Ch4zepl2JJNkg4fyB30+ePnL6ztn4TfRaghthbMit7Uoq\nhWzTlZP4pPCfFt6JwFyzaov77pItaSFLw8laW2bSlmJEPpvxQE+i1rEd+AxW\nAbtT7Ftq4vGT3cLxHF2P0QpvXyf55ArCjZ7Y8K6DSxgAGzuSulPq4nLD/HaM\n+67WmYqGZN9Wov/LrfZ1/pNUix8uzG4eSkxkZTANOEIdEKSRcnCh3UVWMumy\njOlSPj5H/HDkwROW9lEAlI0o+tkC8TQqQh5s4wzcueDzsIURpWoX7/gcxbEm\nEBiy7o/Z4o3EsPisAQtgUmrfpiDp3kIOIiHuqEoa4zqEkP7XEX17wZN1BZgx\nndcGt2AMxbnW/U82IboDCgXgSiPvkeIKPdKofCTJbUruuDL4lhVshHXmDbjG\nB12LTU9hbQ6fNMaVmi0MouzH/8Y2HUJO8LYqnLLs5/jq/K9B09/IKiE3xP2p\nT2Tab2BBj1/Hd5KImsETRGWm8oK8Ci3pUCOilSMIVCqJwf44AlVlqsbAPLCa\njEbXLdqCTrrOCLhz7Kohi6+QP+5mTaQ4+uOUcu8JJCUEFpoOM/QcoQpuCTkR\nbC/k\r\n=Qahk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKHR1J2c7QQQnlpnw2NVI+qsZaaAjYNI5WnLl9flqy0AiEApixyr9O5q1tP3BqB7OhE6iIwdxZEgYmW2xclYCydVeY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.12b84cb7.0_1615336848305_0.7207076125057694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.6ac6784b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dEkRj7ihOgwEoQ8AK1GmBfpdTCCVg7Y1vItyGIq3iEc8v9jWcm9LZMMswXov0D2wxGdXuQDnVHtTfgDRBWssHA==","shasum":"63759da1187fd8c340928def0a4f88fd3b72b68d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.6ac6784b.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBfuCRA9TVsSAnZWagAAtuUP/0HR2jhs/rpAFqWnaDjQ\n83+Us38giLqTWrwTA50uFkt6fwB0rKeWHHnETykEG0Cig9Ko6oiZ3zxRLbAE\ntO16OF3zCannHLUGC46j/tuGHFFGGqmqAdQmtufpe3pc8Zrq9yukdeby2Fw+\npyPkrZjaYI5oFOXtQjbXxTIsnOv6zjmnurF2BqHHIWoc8FHMeINGRZPwX0Lg\n0a8TJBBn30WYrMARhIELR3L7RzDAjXcwVqgRSVF68tS4sQ2xULfCRq22m6T3\nFS7zfcFWq5qMY36Oj9xhbmf6AG31ZWMJLdLDMUXcJHEwTwWJamkp73rdjRbm\nBoSDEUdzhs0lAcOKMm+/peWpMltWjmENtGqgxiHg2u7HeJUPH7ljmaJpRkRB\n8ztrMJ3JI8VuJCf3HzwoDgJ+V4dpl0TxoPGo2xqSezcsAphf3P/oKda/hzRD\n6FEVLORsWb2YtNnJaa2z8oznIqb7P1owGdrLll3+i2zecyuIHTAOo6AFdkg2\npw8GiA2yQjOUmbVk7T7w9elAiBE+HwKIVQKDnmFQvqVdjIpxtcnmaJ3F0XC8\nCyxC5DAxgNwsWJBI8qMNNffOW6RIPxPyLSoy/EyLuACuOir+2L//YTxpxjO1\nufEyJisU/nt+kf6ckW7jaLv+PRZA4X9hJQ8uzltDHAqRaDvyOsMJE5o0C7ZQ\nFPFC\r\n=rnYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm8cfYxSWG+v0/stWZeeqjqtbSVVYPkKUEE9qXtPReTwIhAJ4pp6SWFVPW5TJuQc1on92KsL+ChaTU7Fgm/czQB9OZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.6ac6784b.0_1615337453583_0.38699198195216744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b6d92934.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/OGJmj7f6MUcYPg/So6aqQbUifTrB/FlqJdZ2lDPef+VQ9m8w3mGuEe9kY4bxCygb6Ql6GUR2riWc4qU/MARgA==","shasum":"9d6365b288b53bc6dc27d85951231fb5991e10da","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b6d92934.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGBCRA9TVsSAnZWagAAOYQQAIAuVmkGTVMCFi8jAOd3\nTQlGdGT9Z8swfrYyaIZPk1t7wFwybBPLFi/qIdpBxJPZP+6Z9OAuPbw99GXD\nC2DsQZ5CHW36BCUpemEy7Pab0BJeShbMt2MpyOTphuJB8NoyB5qaBlg9MAB1\nQtnkmRHEMXqQ6g60I9koNm5GC0Xig9d6NdYIMJw8OaFNFxCwTDkQwGpLzT2u\nDu9libuKhN0ZHmepBhMVge3JPvhAlm9iDAsJ08ldVNStXhzRt9Lawj+QA5BR\n/2H2JrITACDQuyUseqhCa3pr20c2kUAxYZ1magIGURoMmYafiqUTqtW044xM\nEhSS75M8yNNSbGwf+IGt2z/mPDqLOrvAx0OZbdAovvSo5blQcWD31uE+D3oQ\n/slM6L31lQtGdPV+31UvOc2Ux5CRPlUmkSMvIGwO2vGGJ+Kitxpyas+EPPO6\n2A4dLAMCnbfK1qktiDsp3xWpvSkfB/zKrkCIOeaJAXi/EroNZhvuA/enUuXW\na+ZsYzSvpTBxqqDhexTsswzcD2+MoAX/FRB0kvTidJ6deS0z8+91eY6lFwDn\nHUsjplqRIshSoAc36HMEHQx0XCBJFU6tsl+JveZfRgFpZrlhDXoynoUxyBpH\nwVGnxxxHqK6Xko0vuOMlxKDq7pZVv1jwtNENSU9GeAxZC6N14elHw6dMZEYJ\nAd1b\r\n=3Km4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHX4Valh2eXCjX3wTAs5gO/zlyj6WGuJR81lTDM7N7ReAiASPdX8ZpBuPhHRCgbTawCDCTGKBqCFU8XQsjMevlaYOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b6d92934.0_1615413632867_0.32855292990495055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.99a55b9e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RvrJ+LE766dg17M4TgKnuZMkJhsFjrppZBKOmPK/l0AYnyqM1X8cRz6MFIwYURt1BMyhjNtEBekDpsHIe8DGjQ==","shasum":"77cd3f4b1277a4d1871751ba611502ecf32eae9c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.99a55b9e.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1qCRA9TVsSAnZWagAAD2IP/jnRs4k1ADSpHCCUFwQ4\n6tlz820+14iOUZkAdH9Y4QFj0ryVEiBG5co1cWtrdOzgx/zecJ/yUTo8ZM1f\niHSd4G6O21maq1ubMsIGW8d8e4+qUOJLqjFUwaaOzAYlxd+x5beuS+c89Si8\nZrbBlgj5PJCQUkh9mIeVN3qVpoz2MLvdkbZeJY5W/Kdds4jiYRDcAZiO2al2\n2hibsv3tOXpqtJ+wxZSgZBT4cY3+P9gfiKhiOSxCoudpcdULRsBF5Lh4SKRJ\nGrTZYz+pp50UCChSJNNYzOY2WwRrUpc1o5HRY0f9h2UFbC4+SkrdjP2HtBHi\nlrqfhdMxhIrWBqPg+1KbYpY/yiDsqanV8RoXzrvmo4vqZfrtt3cRwjJLhu55\nyhcdZVZI9iCaj3sHJ5/YYAJxMv8f4JyhBbq/yWAHYl8vtjXiqpGV/GO/rtno\neBFd44ABtK72QsQXz6qA69ZCjyXiBVawcmku6/Nk87Libhm3Er5+Z1/HkXOb\nyIl+7Lf3l2LVaVeAbXlKOc6IWNo4K0Xx0kZ/NJqFLCDeHGPMdu8e+R78NQr0\nulhuYkc7vTYxgHIK3vn1+N9Tm48br5vcwfGDMDusKhRRRJKCXJvct9/gEY8u\njnpotgBJ+YsAX7F3zAxVFmDuDRAchjwyPdr8UJDkvw4GZ0+eP3Hpagi0I+rl\nVepB\r\n=w3NG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhNtq7tlEBuLiiPN9ZXrjVI7EcaHFCER+Ng22VSILBUwIgZev9ribMxblL3dAdVVmcfUJVyZ97KgNf+2eyyZkmUEg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.99a55b9e.0_1615416682084_0.3178551041705904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.bb14efb7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MGC0jxEvOPI6k2Ua+2Q0XynSYjBi1mKJZ5KxUV8N+4lyciFWkEnJ4UsoEImY6+oaXO5AS0jVc6sCV5qEzdxIpA==","shasum":"62b76f19afb4035cdd937abc5ed56d76e68ff30f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.bb14efb7.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgYCRA9TVsSAnZWagAABwwP+QAzFsvstAfxNpz8Bt7g\nJuFFjRMEKmCVWT7wbBAzQ7JXJdigmCdH8Tdt6E/+5ZTXroKmUY7q/BtibX0I\ne0FnFM0CjrFmMuqM9AkEVbI5A9ErTjpowhH+wz72J8euWPcwCE3vrf9DUfXr\nzmhBhUxuB82xR0BH4EKhadXSSu2fiSE7YWEiLiqZiSkSjZQbCnJCMc0W5lV7\niKkRkF/I4A74fg6IuGjg4wOwssQUTKkujUqiktl/j44TtrAA2ThaURj+rFdG\nCZBhrjieacndtKR9045og51o+13RlcVcDV41G2QMF0u19Le03kddGYRhKEL9\nMfPisejK7devo9+HckxU5lxiFlLZMQJ6sHyrrJZqM/NYM1RRxK0LzukZQgkc\nBhp5S36+2Fm+3BbTiEXi14rZZHp1M+Lji8fK0+cwgIN3y5LcWYmX609TDn5i\nn827sjRkOc8G2x3c6MpAwBXT5SByUB4hC5g3mH93aWSxIPbFCpOxNeol/lcw\nsUbRbSClrGI9IIrWXkaZC20nZvAWXerR03ImIGohUgSOg/ZWUW+HuPn1Qo9o\n4R5oz0yo/J7ki7WD+/UvFBDt/JqpJQ23oaW7PeSkfCxxGxKHv/dWJ2jBc/eq\nIsgqF2PwAvKIaLHocNujFTYxwVKRkaT51tq5jTVSVy42flr+L/+qadMmiQ6l\n9fme\r\n=racr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ83jW63MYF0bfJm9PpPARtQm2FOG1yf24lV4fXyCuqAiEA3yiClnLGEu0toSr51MDDJlmwxyuHkzm++88hK4HD/pA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.bb14efb7.0_1615419415790_0.5129283226957408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OrbcJJjc3EQlLaavrWdKu4LkLIxPpGpFnvYOFNUYYQhso06dXA+MxD3RoxZjOAFTeuRuxbshbYeRCShrRDb4pw==","shasum":"112d03840c70e0c76869be68a1cf2d92ffb92014","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLgCRA9TVsSAnZWagAAOJEP/3UYulR4qcQU+pXcYX8Z\nibMpJdz0mvuZ7cmzOkV3FLdXxHa6sni/qXpwMG+E5mq0n6wrpTuVg7ygRi9r\no114Q0vT5+zDsz4lHKP/IpFPYOdCVUSrCOjULcr7gE+XUzQtI1CbLQqMZokG\ntXhiu1H7b5oc0Ze9GA3ts8UvlaKWHlNNNSpUHsVsMKOULVe0pXb0Mg2piCan\nQLp0MBFMddZBmy3fSOxvCmIE98IYNAmutl6dtu175QDFVDveQ0eZ0ytYvTCK\n8rY4JzjZdMT50thZEZQf7YhHpI8Ml54T7CZAgej1ISG3CdjYVZgGfsrdPq9X\nYcW3kRs3M3ATARW3U/eCtd7qxhBUiZ/B5kH7yJqCVg8HeyEnOgAupDQhP37w\nacpDYx2qMJLWRSs2Pl0eEI4C3QXjvVjyaG8xiPxDnemx23ryhXshY972tt5C\nyOIbFKxua6zZKllKmcAp1iULQEKvu/D8tfJNWsfyjydamjAvfxgMvKJb8n1M\nyZfCHtXkvxgOPFyCbhqQGsKOzoZE2Fv67d4cePAt2CiYU4+8BWsjl3y2c08g\ngraMWyOjqwiNLAVLmsWcUcX8DmT88zSPn4URiouudD6rAzecFF7RPdDSlw97\nsd0zEW8tDI2snCDSUxbkD2dKFvOHU0q7lCBNpVhZwhjwakvj5TjpSByBSZ34\nsw2i\r\n=x6qU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbFYwXKbai8K915bBY4Xtu1x3AbZdXT3cQbranX8RrwAiEAnIQLQm5IIXCRMX4u8C9F5HH7eU5+1A5f2MPTbS/t2sg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.9ecf3bdd.0_1615422175846_0.06342043520707086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4KHLgyGYqF0BHVwaLd6lQ8P2xCHBnZAtEMD/18MiM69hCTg4C+uIAiua5pUYsp195U/g59ok0L3BHpSjAiPg2w==","shasum":"6cf2d365c98cd562fb42fff3456785cafab48103","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.7c0e02fd.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZtCRA9TVsSAnZWagAA+qQP/RJG2edWIhX8AXKilH5m\n7QgGrssWpx6/GB2jsDEYC6zgbB5r1EOGRlFS1V7LrHbYna4ZM/wr7LQQcRJ2\nhwZuaQlbPkl2QTU58MuJGlF45I6YCVDldAycdqsODLfu5jqWLgxywG7cXMGH\noFnoAjT/Ea9OvQHtHyT237cgPmwyEIf4buH9s0cq8seVF9HZ5Jb/7Q+Q/Zj4\n4jTCocO63r3boegD1VbyS2Qv6cPtfmxy61mfZrHdOB1k3MQM1Lg6zJa0zSSN\nsJQT4dyVD2N4mYTyWMmKg2qzyyhfS+fUaA8qdwg/t83azuicFRPbrwx0VUeS\ncdfX+fBpUhvpKllu1l2UBGzM1WLNwTGKyfgacp2/SEK1tC04MSeixZfK9PFp\nz/paHGM8pS7CkUd4O+h6DEbSY0rRryJgJ9jEGuJ6DSfrQBWUWmD6EV+7MoHJ\nq7fihF2kyhC5spXnv8IayaAddYAJH0HBZVyfEq+lFpUFuCGojsGGE6kx7IiO\nqXXgq6vr5xOcH/zv/Ltt6fD3gEsxNpRebNLDj+VlKvUmlX1TO3nDfl8vhePZ\n9ySb6/LAWhtyq0qy0qr8tSBKRckma/0YC5hu0HaabeB2NZrvTsDNOVC0EKXd\n3bRA+uNpLDm9DzJFa1yj5yY3oymEK7Gub+Of99uYF9S5yS67A00egXL8ycGO\nt9kp\r\n=n82x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEn8pLMwVesuwUddlzrNPoZLc821CJmfJKCaBkp/xf+pAiBLwFOLdTynMqBqCoa/lLU/6y2SJWJBBHSKfRg/ECefNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.7c0e02fd.0_1615427180982_0.16889545094243652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hx2yOXvo0c1GAH4EA1HS+hnPetiglNI74hTxeC8Se/J7fYHZ+BUDOrFbxOcaPtCfVY4976Jk+CsmwdsYCcFPuw==","shasum":"9ccfe6b981c87e3a811c8c782569deb6af02036a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2d6d59cc.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFpCRA9TVsSAnZWagAAn0IP/3PIyZXczN22YIfQmzSs\nxHIx8dGmfGJegijXey0lflw6lP7fcX2bZWa7ExaW/3cfFyk+AWNOKWh6wrw2\noa6yce+pgGnnrwTGkD6MJGvStUTPFqh/839xiRHtAqLWDItFRVLEBKDaU0cY\n3UohTUZtFwQMU3AvaAZ5SjuE9HfnxgvXu6o1PCnyb62nL0TyQtE7hS9A8mtd\nM+/faVFqqELuhXWg4GMXuHBi0kyrsdt+jvUKTIMPqdALW9949dk9223B7tvy\nOSvlXnSnyRGVmVHXZ9a+m5mpSJ/bM8aZWnHX3Q1NCOKWQy8k4bUId+BqQAc3\nROb82i1x+zYaxLWbDbhYYD+Q5kqnM8vrT1QgDI4J1oECUYypn1x/qHjqIuyz\neohNlWsvfOo67sTWVtDPKrs6x67o4cmSNIblkHMaOrMNp0f5f3dFCEbCBj0B\nt9A1KG0s3hGpNA1cD56hkT8EGztgc2gzQnP/JoGkmw3bmDuYG6KOttoqfv6J\n1zqAesyont21Fe8+YBY24ErQYFM1zvN957nn39jFs4O1Mmh3zxOFF/Oidd/K\nv/7augfX4Yl1es3fDvX+B9dIV3cn+4xNRMnMijR/rCynxacLG1pxdQO2qUXo\nR5PF87W0NlOWx2jqmr3EHkFqpR1whgvkf9LnhfUYc952LZ54cS8wEA5CpKeM\nFiGg\r\n=OGw0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYREU/wMMSuOzjJkU4+EWUHg3CTRPF3vvk5IEXnDlQQQIhALZURXirLSLJTqkiC76rKg1sMPfHD841GaTu391eYGSf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2d6d59cc.0_1615487337326_0.7688885017627873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0138863c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-z+coxgvRMDSOE8ExFbwBR+FyGV5SQGmSc6ic6nslDkjziXaFm0fvlWFNz2CymitgWeDHhL9aDrKyXL1FEjx3bg==","shasum":"d72fbad97450a28f8adcd9892844a6817a82a61a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0138863c.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmMqCRA9TVsSAnZWagAAZOIP/3hQ50uw7VOqttYBXU4m\nm3V0GM9bfBHmIi0oGDqnwfCYCOgFHYCi6HOWXE60VntOf/2cYEWLzy8tUmdi\ne9AXXyECPo/jPOI0c8neksb41iv8DUE2shvxapshuQ3uu/zzj9jQw031kbOM\nCa5VLwbs7jYjq8joVI7rV/yHUIbVwXUpgJJQdbghGMgBRgK5SIEIQ+w+9E8q\nhEk0kRcvc1gA0UNbOCga1T28ZnGCbhbLlRO3tTKY3c9yEG4r9nwQKmSGWUC3\n1lyXs5ZWgWHUy80wQ5QcqGS37eF0lzz8zApJhqhC9VlzmaPI5ITibf+Ik/mV\ne0t84KP5buwRAbLpDIzXgDai58FU57jWSBvH//CaEf4rsRtLgc/tp0NPkENt\n4pA9IIvp5jpfKxEAX89FsH6Rv5L/pY3LdAL4B34hv7LLvCKBlrN3IU2QVLTq\nSBnK6HrJa9QT35SIZASFUpRhdBPFpDAImubAuwgqhfetm2soyWkf0DRiwatq\nZ+Jjv9szyut0Lct3KoMxU8TbnehIhhnBTijCBjG5vVLGoS86lAqZF0NrZpc1\nDEKgf/UMzluALaDcCPNakmUIrccHFhFJpHh4HI7yv3XCgeL8OPXvQxG7KZ4r\nxVP82g8g/mNeAxO9wEMKRCRzz0V9X3Zr2EjL6tj0z9wokPVERXS35SxrZGxw\nIJbJ\r\n=my3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGe0xSGewQ+q74k2aZ/Zcqqsh0B9DmM+XNT1lERFALVwIhAIb3ZwjbRafwwV5nvgmzfL2wo8m7J6NAwMgJ5T/k0fOl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0138863c.0_1615487785683_0.2345874398316361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.926f5bad.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bnUQM7wOAi/GKY0iT1F18lXzYgvPt5GMVc84nfgNYF9GOfi51j00+6nUt2eEPL9iTwC2Q1mXVAMa8PzhokU8KQ==","shasum":"469beabce7d690648a2c9e766d8358eaa06ad3e8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.926f5bad.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsTCRA9TVsSAnZWagAAoPsP/0n+3fdwMfbP2fXASAT2\nXrskKwp/dl96XJfvYpnqAxciI9BhDVx2F+g6y+eMbVFs/ur0+0BCZpZ/OAFb\n0782MryqQYkP65d+skVfOcsYO6ra9ZAi0H25a5Mb/DNIa9Sed4OBRefW3OeQ\nuMvg1LqTSm/ut9CI0srzQ/CILsjbkH7d9U5UuktKwIEDjUa2yC/4l6yfZJRC\nPVSxA9nYykfSRBBkBRAsL+loFepIQCb+uqgSka21Fel4PVTE/cSch2OENzRC\nBFateAQlOeXsKlFhKbwLQtNyZH+08tRwv1So5gSdZhUnTVdtKai31rubZJc1\nGp3rG1TA+QI7sw7USBsn9Y9TPKU7K4N4b5+5+qdzWLez+LN2+ZfIhlwVVyRp\nsF0ef6ZDS6vrqB+NdLdYqxeu+6QZw/FRIC4TXgqQGMYW7yWbo+kIcPTqZ0o9\ny9wrPqksl/cCDTRxDBClfKbngTuE/ZelJn0aZUhY8IRnG+Mz/nyApyzORDsy\nkqd35c3c5xmh/0HmbNkYT5JqCWf/Ca3tqMxaBaH6c+w3Ws9kO8u1v7y0IjJd\nLI3UW14cWqo6+yOsPluVMMJh5OAeaQ05sMBNPHoN0VUGPzOQwB+e8OeTchyh\n1Z2DKdNt1KbmARrjZj6IK10NoEDa8fMvz/yxphXAue7CwhE25wStyyfXNyTj\nFYuw\r\n=b94z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUdvutBi05xdNwgKksWtN2vcVPLQ3TfJJz41CS8VWBSwIgaby/BcORAYJU+zPHgYdG5HfPtRueyyNi+Vazg70bzC0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.926f5bad.0_1615493907253_0.45510692646338713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.520290a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/ripple":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-znFzjPatGEOjF0SM0yXLC2CCztiZmgAL+wMT0Xs5xPATjDl0Bo553CBU7TZlhHBhH9I3vflWfqQsYayoXxtcrw==","shasum":"175e0853b8e0d927da19b8645d90e35e4751699d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.520290a9.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplbCRA9TVsSAnZWagAAbpoQAKD6pXVdX1CMifYEarrI\nVzptoVicCTt3Pto0yaDu5+EXNmG2XTEehutBEvjG+pZzVhr34JCBuB8pA9VX\nsNWiIpG/uFwo0i8PEjxyuVx0zDVJ1AUZ6Way74pn/68h06JWcjVly0Vum1VE\nfW5g3e1JFyOiO/k6qJm7spxVI+00AUNZSCwcZ3tzujksTdZyZ190T7+IfrNR\npyGbdLUAp4Mmty71IrUxDa/04JReJxt5Wo0MGtj0yt94JFPHf0KjjLvGK0ml\nbkWueBvKHLa72EAQ0Q57xAxTI/Ylx9tcpBzmaW5EMoqBYQf02GDo5wHY73xB\n5UL3MevuqCA6JDvXByx3PkwJMhB5X0A+kpz+Sj68m5Gkzjspf6wlR+RH0PPY\namqo37B97yVFgarqJAWdwp+wrexFIZenM/UPKFajzdP2/3Nrb46MNTOdnAKN\n9anMD0M72x7QHIQPBpzKOEmbH+CRWmwxEJZvPVWtRJiUakuUjHL3GCOuIs1u\neGPpictRX5W0LuTtpGb1mJNjfrJduTiA2jnhk04pYQHr5BOlQMVGRM4v35C+\nopRDn+zwVufteWNw8xq49kcb0U+yBCvKRW42lTNA7gsRxMAP4a9vLFHbrvDH\nzmp0rgrxqiEkAd3/1IdJ//dDlriz819t1HEB+239lGCatHmWjRZINkMEQ+Hl\n8oKC\r\n=bP6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0V8t6lIrRB86XnAdpZb8NGE3/J547Uv/NYHOFsxHWbAiEA1rnRtpFDHU4pSo2uD/akjwpESz6boXv/DE7OK1Sf608="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.520290a9.0_1615501659474_0.5481093862161617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.9ec431d1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/ripple":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-r6C4BYbfgVmVMawI3xhDLixb6L+uebM9zQ8N46+Wlkd/kNwFGprtaRDKl1EvftRmdoHt0l2GW4TNJJZGBhYSmg==","shasum":"06282799d81746f99897bdd2c27acc45e24b9a79","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.9ec431d1.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppcCRA9TVsSAnZWagAA9zQP/3/8wBrWFW4gwWeH8QPX\ngc0oIDNc3RLe53YphKQUbfuxeGbfmuE1qE6VTIk2Ugcxrk5VzV+qTuHiwS1H\nl4ABupDWgK/KVJ1+ghRJKn2P+ZKdbcxpfHigSTV5RiNf4jACIi/6XKsNfDXc\nHSgafemUaqSteM8kJuMxEL4NYJlKfUr7teo5mFvhbMD7hotXu6Ij9xhlfGVz\nq2AiRpOMmj8Xu5kSmsWU+EwXxbtBF/jxiCqbLxv1qsn+XmXFRnOI7UYw7lfw\ntV/M8aIKwA9EeYFq8dwVSw/r30L7JsJsrFDZzmp+Xi8ah3W5mRNXzfr8lsRL\nlAE+xxnuZkvGLtwfFYWahSxoaErFcZt9jCXQmlhOE4NIZ9+Q2Vi/Bc/JFNzH\n3YElC9+8KW33rnM9x/opxAFU2tbUYlz913zxaB045cLJthqpHoSP+lwrKdoo\nb0MqPSoYChqq3He7vhL9Sg9p88dYS2gyqKJekxX0PqWveyxQcBwHI5vfEy6C\nyzMMVnuA+Z5Rvrf3bgAqpltyuCQCTxaeI/d9sfPWTlk3cuDuuie4VF67iPTN\nJ810e1FNikbEJjuWPH/ZiEzvS2GEzi+3znciZGGtbiyQzGSaIdRXWfTmMrl9\n55k8vXNimbLCcuxLjtKUgNAvZegjvtZqWmPEL4O+AyJ8h0/EL2Cp85l8uyqH\nLOAc\r\n=v9qw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD++c3ZMxHIaurVVFj2MIfclQvmyzksgAwvG8rpPaGNrAIhAJrIMIDeiQxyQV8jE7IsrsSxv9lFX4ATtBuTpQo8hbY+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.9ec431d1.0_1615501916397_0.8606336418862017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4246c082.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/ripple":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cPEy+yNTi+ltoXEizEiAc+Rfy7dSxvEdI0uxq0AyLDs6TWy8Gm+8xkZJLUqZ/9eTwQGKCr4RKBNgY2L/WvE8hA==","shasum":"19e5aadd1ad0ec4798021ed17fdfb67849c2f4d3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4246c082.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwHCRA9TVsSAnZWagAAoVIP/iH9YflkNc0TjLxhnSXr\nVi8RB3+pGPCDf5j5i2jJASnLZ4e2jNyzclufXB6cEqvGUVQ4aS51PXVk478r\n5vRWDVcsReXI/TguqeETuHysAglHGiZfNb//rInf5hA1H00SmV/BVj+RgDrX\n1AKzArmzj55faCPFmPpZwPOVeQqd6aQjClKrsALErzyYeHPA2BlZOKYHFAkq\nt3Ybly7GlwKYJWNsOjU7m1ZVbInJzxUT60YmIcDCHYx76k8QApY5vVmJHW0S\nSeAhO6vl8cVHUDoHWTrhGZ00TiXFKW178U9GW/fh+/tDurr5HA0u+oeU0Hdv\nlnetsIiJdnofH6JNfvumUZ41xP8n+mknWHMEhEvZ1QBXn7W6ETXDQeg2uhkJ\naZiVeye8lCr1ZoiQclG6KmX/15UtcH6Xw9g6cyXJ7C7O/dUGxbMAMihFutIB\nnjee3r+3BPpSWk1FaUPzju1VZ86p04P/k/M78vrJ3nGJgNyxk/GTTDLboP8s\ns2ieHiDr8O6ID0CiacdIKNk44XtHgsEvnh6idygmtpGcevfqMRqkT9bdUyjf\n8TGuEzy/Id5+ZauOAh3UX6IiqAjv4FWz+7W3aPLvO6BIlRKMvCcAB3xVlrGS\nMphXEo3mQc8XsOKUksYU/y9NJf/ytMqnNEeyCRD5cBsCnmSYV3zhhPAYpF71\nQZiy\r\n=cr77\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpooOvg/JV7iu2KruQ9NlfDL33lQ93Q1y9qwzL1SxiPAiB54Iwj5CR8fGCuBYIpTOMa1RfNIujRSm0FQJSG7fh30Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4246c082.0_1615502342552_0.39727303333805697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.2d736253.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/ripple":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Jfs3Fzu5OoG1MCrLymW9n9+WBpsDDfyL/M6oM7m+THp1CI96GJxeSJpCJB3P0+SpN2z23QdUl7OA9bgBY/txbQ==","shasum":"51aca0eb0fbca0de629e5a680e440f93bd77fff8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.2d736253.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+EvCRA9TVsSAnZWagAAbrYP/37z32e2pB4MFM4bOmrm\nkAfLT3imLVk5NGtk/vei3P5hxdAha47JdEbxnhvkRlshThv++e3oavH9Gec0\n1Ge/jEX1y9NQHDB1RQMvFYVbwacKWBfWBfUBTEYos01YswVGX17OFiw8QXhj\nNmwRtf+YQMTwQiMrQB9+cE3r92XHxHKe5dC1n/lQ831cF/hw3VosDatMABXr\n4mNWvhZudaEWmp4x9mtG7mF2Hbur53aFvSdALOHbyZ4a5FruBhQS2ECcyfeu\nCqFvJuDWNf9xSivcaaJ+wTJSeQH2SGTAAIFFMEzFtZW8WBMx5u28MhY3EJfE\nMA4F8XIEw28Wm1kYzmWxkJ8mJWPt1wMeLBG+29xeW+659x6+thS/hMfK+nz2\ndvrj+sEy/oAJN8Zoh9th/8RUQkRvAUZUpEejPCpnq35YOzRV3x9EiSTi2qaz\nzj5DIyjjOc2b4a3qF0a6nqUKm4tbDbVq8XarjDbRulibF7eBIYknK2szEz5I\nmrJKQsHDjkwSRuMaRaIH1wDgiRGALXiaX5tSbKZ8sLA/gM0nZ3nL9ecpskkU\n88E55BJPH+nDxvfIAb5Qden0sH1+9GgI0IGnXRg45smTjN65nLdAsSc5UkWm\nzYjTja2ji2COowcbV44Iy1F1nso87XG1LadZ15hjETfMf52RiWqrxPu2a8Sd\nBCyq\r\n=4s8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuiUJxoplA+wGNHuAFN9RLyUM+gF7H25tQYK/FKIq6HAiBFC3CsAEW+ce1VUfmd7VmyMKQEJU4TsKyKVxCJW7nKtQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.2d736253.0_1615847727378_0.7023749758696596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.7033124d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/ripple":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0OmwKnxE+0oiaa5LHrsoLlWWhR9trM4ayOS840b1tKepXMHWQYy+VH1Q7Awk1oJa9dVvNd+IgU06fW9FGgLltg==","shasum":"0cbe0367c897f60b7723f7453499f357e809d32e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.7033124d.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrZCRA9TVsSAnZWagAAzBEP/3MI3hO17Mzjifx2cy35\nId+M+jmdyK8YsO/nCOorOD7KnC93KeysZXQf+kQhvtQBtl4+emJHMiHqNKdX\nst9xb2YXp1bNmWGzJCB7EaTbFLgmldSJZ8jOVPW3dwJEc7hV8QAAUZiSRpoP\nxJsyzs90LNMRxzBxzBqfPQ93OvMpOqqWHkF9MAmPlRbpAF0utRnbLX2L1M4R\nz+UIvJOuH9yN4mcw99QRVjNUpOrzUMdof2YumryS4/iSQXjsb3cOxmOr+FYu\nmXO+g7/ytEdHiEHmufuZCH+BE3XIK1tQPT9NpXYZKADw/KxKmI1Z54YSmGWu\n26DsW4oJy6eejM6PcSLoEFHLUrNF+4ZhU/PnLo7Ghw0jdMFSSlFNtyNR7UWI\nG6ALqNhuY4UVS1J1Kze3ZDq7ZHwgyDbuhEmzJbY3Cw6HIFXy9iwW9AZ/dNml\n8cj+8zGOjv5gVA26lN9nxHpSmM5dGN0W9ahh8d2gldUlkNfdMHJdHX6mY8Ly\nBCZGwLbIVXwilRVEo/QiMymR51EmG5e7mtPjeAeowb4YOT8W61VTcUrAaQqf\n2FdD/l0Bbgbg4eAeURcRolJXhWajl1HF5Sw+qXQ4BMfRiuJVaz77MEXTr8OM\npCUKeUTxoWuXYe8gZ1jqQTwRPOx+t5jVFGGk0N4CR2UB9fMoP+efVOsQtzhX\no6na\r\n=RswJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIlO48mna95itHLGPrqLcMyFzS+0hVCIl4ds7vKIhH/AiA3bJ2B206sCxkask8EoC3YiegdRuwgcnPIQEziw8qqcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.7033124d.0_1615919833053_0.5941131214424795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.6c0ee901.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/ripple":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-mtqwg+ZNlRXDLRenU8HDsnKshqLDtCTAchRa3UZbQ0Fu81q4qFyuYoIjmFHG3xVefSKsOzSRlhThdeZanjkV1g==","shasum":"0a6fc5c0d8cd7a55c286df2d5ad670c4c72ef51b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.6c0ee901.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNwCRA9TVsSAnZWagAABYAP/3NbK0RPtK/A5SP196Wc\nab8ALsJlMAnQqybpOQbyesS7RPD97AmGS2Z7F8DC3CBdlAz/z1TNjNaJRo8b\nLY4MSr6sgpWpJJgy8Sw5wlcIDBgF8BHg/w2824frcqhdEGXcjPkqpxYEKDg2\nkST9mUR7MiXiEFij2lyTeS4HZqSI8PiyMOCCHH3oIBykaVPWQKFf4bdRihHw\nEJqdqVDM684JdstY4t1KF0YPDQyiHVdaGjQgUl4NaV/RUfPXA275n5599a3I\nYUccW0WaIUB21nbbfCRXnWQxtFvW3naOjaMlBvy0WiwUUh4Z2EHp/sQwKOFV\nBo8uWOAtimYIah3PS+YrnY3/nbvgpIOebsa0TowDq7YeP+3xSko8LWAMWwkb\nLZ1ZYxOvCcH0lVkxNbY3/FcXcbiz6kHDMTfaIzWVFltsJtKrIYhHJ+Ptv6pp\nT+OjsrjS4KSspn2hnxDOjkUt0plb0zzCWZMnTADXbp6qzz/3NKNkgAqjTcOY\nIL/PELS6EVV2YzdgNnEFmN7RCCXv1lhKrsXHvdwfV+Hk+z/4XkdM2EIJeNTG\nFZQvfujayZu3FKgurUcRdwlWL78F3rCYN8gmGFLPd41cxH7AkgEoi/6m/yqD\nZ6zE1LxUpeq1jCGg5tyICQBUbBGr2tcIfuDXbfhVcJnI+N1Yq2oY3ifLoUNa\nSqHS\r\n=kT7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8se26+yXvYG1um4gw8tOtENxaPToJDjztHL7bMSaVsQIgTLe45bVGMLQiF+2slBQXStMw1oPdWdGz6vqihNflhSc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.6c0ee901.0_1615934319761_0.9570808774193347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.7f0d605e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rxRsJCsc51aqPoAZTqZxHD3Hl0XxuudQfQ5A7iGZ2Izzqwgc2Jbh8VafkJt6T7Fc7uJIAlZ2E2P7cTsYWdDJhQ==","shasum":"07efd984db4a5db9616622d82832ef1e2e86a4d2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.7f0d605e.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSfCRA9TVsSAnZWagAAcUMP/iKVnPlqnUcwEYxpAScB\na7Zt+z38KqmBjiV/B+5f+F+ZtkSJ8Fhuv0QT+Lr/IHRMBzWMpU4lRYeG5yYd\np07A356tGy8lk+SJ+YVp8rGEuRuRaM1aEFK39OCkiDglAjyR4dNwhf57bqWG\n5bj401BEVfgvLtYJjlxsTnD3Q8rnKr2750V+Ja6stjI+Nq25nqhN0Xdj85lZ\noZUkPBHCmk1LJ7/3KZpzvmEuxJtX+gBlAC45ovQYSg/ZF1C1EBndzjRkdgJb\nU3sysYa11Jr8bBlXpW/4MEzAEoO8sGEB8zPwsPpqG+8AIAuHOQDKNcuan6FP\nwI0aHINYoaNtV6lOzUg04wOmQZQGZpfWJiKTUYioxZI/93ujy9fPltirrau0\nUPb+ShudE+fy51Hj1TkQYizqUoeVTzv/7o+OFtSnkrSwGEDGtjvsiPgHxygz\nBP7vS8DbwT5Y9vwulVU/kyEE1ocbG7vCwWlSGIut1fMzBAqGlNt/nV9Pg+cJ\nSCd8w4qmbyUKGcp8NA/dKISqzF4WI5jZun5OsRyfDZ7VfsvZqlttPebLCsAm\nagROrQCutlNbbdH7iVzyG0gM7FM4CVnCRL+okylf//t0dcGrSnwJjOTWBn2T\nxbeFxNI5nSPmAlms4BLTr/oUOJjmKNB0nhAD4A4lhtMtO7ZxS7RH12K4Iy2d\n+owU\r\n=Dzrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgQK1NrMJm7GQU67LikHr+6lXmk6teUszNTCYiW+DjyAiEA+N3io0tAOykfbosQ2fSylXrLwwlXoKOLrMBcpm6TpgA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.7f0d605e.0_1616004255307_0.9653026813069312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.572107b5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3/35OP0+BqTbZATCJyZVgR0xDwUB57GdmBuz5r6hC7Ha/hyHoAD0aOxdTJp/O7/A3V8kl9t+dUZeQu2bWvekCA==","shasum":"357843f55ea432201151b621be675b3bcff56fbf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.572107b5.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gWCRA9TVsSAnZWagAAv44P/1EXBTr9Qrkv2tQkRqCf\nqLS7ussgYJ0nHCcbG+113sgmApWyssgS1KXyN98MPwi3EPg3OsP3TE8yT599\nGXVkdTG16sHlUInymu18v7kk6uboDwqE3MRIPgtx+EPoORttKa5vePbQjJjL\nGejsHoN4rnr3ZbW5ga5uWv6EdJY4KZcPekz1ndmbnzQeYfTuS+cGZqm1e875\ndaTPL5pbfa/U8wLETLR/cuu/bYHsVPQDG5dAOqh9GGqPAnz3U+M+2+edGM02\n/iU89Or8PidvCdVKEI7diGYnUszSb5AjjsQ3PyDG9mxZttBsn6YDxiSEO9+C\nATjd3im/XdRrJCbB8MKGJxHZNbY3Uxu4jh+XAkyf8B+VQIxyos0ap2ukftww\nJty2gcND3kF+rS7vlnQiIGYbXrS6ngdlrwgaLDbMRGtI9dMT5yUMgm9tDeCL\nCPmDLwwefVR6zT/1LicmVVRGeBWlkffqxGkz4hKW9+g7JJXTTFbUBKqpXwu4\nGFV3f4NMIN8ldL4w1w1SoeeJ+STCqwVtk3FS5enfdQfIrSMyVZx6KCCfWwEv\np3YXxbsAIfKS6mnd1hukhmQ+++2PLKok4+XWpMglVQN87jxh+92mBbuRiBU1\nboHp2t/8z/DV93BH9pDNPg8EMBj/u3nrDVkNDEwcXg52MJE38ElKzcOv/n6B\nVJuj\r\n=IlK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbHtvWea/ak/QAq7IIh5GiwcMkLb4tYyzWp5YzvdQe5gIhAPpbn0ox01+SFwlUJ55GzUuK+Zb+gnnyAW3qe3l9FEqA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.572107b5.0_1616111637943_0.17092752537956346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b7b220b1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OKiM9t+r1fqiFCrtsawXFGlmbkRMNQThMsvC0xg2bnFDsu2AGaFlh4vIhdJuvX5wa6FnVKyX038bS+bnxJcsUw==","shasum":"2786f142108f83823675e633e08e35e22a2d753c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b7b220b1.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4eCRA9TVsSAnZWagAAq68P/Rbp/D9D1KyHQOQPWw27\nvFg/3wQIz0HxV+YlBi9m052rcK578V9zwa52cnjJLkyr0faBboMLrd6NCIn9\nhQ8K42xAGSgAtQw+mzsPlVLL2BrCZ9q74i9+kjzzF//0WOD89YebE8DcVusB\nowf/YTUfeRN6OhSo0wog8LYq1jTTUR9TuPtVkdwqvfpks3CpwK25cyIOPOo6\nF57JVBUhj2QSXU1dBFjAao3Alvbyg6aFN2ySWNIYkkoCxzmwArhmE+8gim75\nZzlleI61B61rmmyBukID2EZD+nm0qk/e4qK3IQnMjtZrgXpX3J0D3fzNyxl3\n4l09ftbSyr5iitJhvV/iI+RjqI0n6OnsZeK3L14/SNIA0XFXSS099E07iz0P\nD1uq9/XuEpA7+AB9MwZI/RBxkNcjQcMMq+dXHoqp49kpZYo8AEMS7N3heIb7\nWj1+BpbsaRQFq/VwXsmvW7oFrKQo0NHyCJmc44Bku/cx0xxtf8uADQcipGKA\nIbqjjmOBJXYtZjIXpdp8FECyI4IW1O3ye21B0e129RjdTVogDzu3uE+p428Q\nxr5Lqym8GYsO84TdaI0Jn0Ake3Yy0WQzebFQgTblx9br+G3R0BOdiDss7E9o\nKyNgIGZpHSJNtIlpvYVP+zby69hiT+Z3rwu7PjRbWF3cm5a4RjgjmyxXuRGE\nec9m\r\n=ZR4+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoC/GDGHOPsZSrDMbiLmzZvB6c2JKy8yNKHaaYU02uEQIgAicb+EO/dTyOv5l+yIHgRM/go3stkDO0ux81MYHYKa8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b7b220b1.0_1616113181620_0.288420965280096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.233b2de7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dbWLgDkQZyW34pFoN789t3MUQvNmOchPSQwGBo9CZKvncN32QQnSBDzBbWKUxc0sIZrR2FO+jsUWCIorOGH66w==","shasum":"133afbb04b0c8d29b12648155a75df6fdd526351","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.233b2de7.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2NCRA9TVsSAnZWagAAXZMP/3/aVOfb51seuaBarA8Q\n8fpagc7e/Fx66UKmXe0GGZHNrHVHyXUE36iouhvThM6CcoTxRH2kN75Y2WZ1\ns7RsdKG1s4Za8TVEYdJ62xzuo9j5BHrVdMWHd1HmxWfXSJAk6KuW5d0QlbWR\nd31SEsx7cRKtHcagMIavZTtL/grF0jpnv+M01a3CcHUq+2/9FQKKwBB+nzaR\ngOoZyL5f62w3FIDm6SZQER2HAOghqWI+jn3SK3OPGTpXtCQVHtfSbLQfdPEv\nI2gVZv5pAAruVk/x83zQMvJB58YyYTY2p/VXGQkBlM4oHIDU+jd7sB82Lq5t\nQfwf6j6sxFDgJwDrmlaU+vJe447q2ePuJJXpHeVS1+UOugU7W6nR3oeSTbHh\n0zWHyfeYHZV5TrMn5wt4XAtPfwKKMRHvIULCAbSo3ePvACnSZcn0dYIsafXN\nf5QXd6yalDuN0fAHrpk1srVvtytf9fSDxrQ+U2ByV+MHzHALkIRWk7mJTc8e\nKI6vCplL5fPlteJNZdBvJacM4oUoWj3C8mrpt8yyKdnwnPXrY00/kbQbnyZV\nsBtk4LOAvfViS7bl64UsWkdPqVTNKbgX3BAoyqtYE82mjocfOVrZNMSM8WTU\n9GvlSsfQBPGQcuXzFSF4EBcRM6k74f8yRv/n6Wp1KUd4FOXAaFgzf/8qL0ui\njspE\r\n=RQC9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqKZOkYDNgA5CDvfyEHo0hxTgiaEx1fhCQNt/HK+ZWUgIgb14xYhHLaByerI4nzlWZWJCKmgbJonPE5BJ5Km5HoKo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.233b2de7.0_1616178573531_0.3459169405382787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EcpIK6oMAghd162C7hqqSU1RNcImx55UYtWawHZiC2njgGPqihsEeBfg5C+K28Yr0gaeI7zlqs+MsDXTy90dtA==","shasum":"ed8d1a635ee9cc4d3901d38be6e717e15f80a363","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0c1a2d97.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRW4CRA9TVsSAnZWagAA3ZUP/ir0QF7PjqLymrPDCtna\nJutF6pO4uMJbR0vKxZnmvk5V8zkzDlPDg4lKZ9DRD2F7x9L7+GqaZM1k4GyI\nchYSMeopj/Wk7xlYVSj3tOaUTau7MATM6ZmyZ5rW6297ZSdJ3gBcRpe6V1V1\nGqFQSd6ZnXt8XTiZRLboW3v0lJ1AasdNo+5sqUpBntmRf0SrKONSUnODXMoD\nqhcKNNTjSWUomL8X/XcL9hJQFwWrkfIKaE1UGAMcIuwuj0CkRvCrhKs9P5th\nSfqIQzsw760LwL0R1CbDAGWzeJKv0VE8KwCHIP+Q5JgV6xyyvrYIM7C+eyM0\n0DICYy0l2ZPr+6Uzpd7ggNma8iFhwLu3TzquXFGRePfaBhmNFdeL+LsCMXzV\nNpYOuQglacFZ7VQPCJ0j2xZUnyngTyvi7Oujz9M11KgBcgrNOqlCTqAPSKCE\njKSo52AqoU5EwB2JHLUm7J/uCQISCbgxcnHRt637/pAu0qNUog+ebIwDzzlV\n42VF4zfIwms+H3fowef1WtJUxLL8VEtlPvUITDSZqv2VRYrv5uUMPcJoguzf\njE/5K263mNK4wcpQjGhJWy2wuXVMY2ENeikhLZGCqq+vH6BoL7iIrV9dFhW5\nbHnVXVaGKZ58axfVB8Cv/9bBSllOUgNE0Bm/6gnJqX/pz4/Pa3E10EkSjyET\nUwAX\r\n=3oGZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGt5uoXW1TP3b4aMVyaXyhRj4+Pak02eT6f87dxPyW7lAiEAh6dQMv9AlvkfWTZ7xq68rb8QBjFXkInVSUptuv/NpCQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0c1a2d97.0_1616188855989_0.19866659453576352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.57ca2e73.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/ripple":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Jf3Yksg8o1sCHfv6nf7TcrRf0rjki3Z7Xy0MOkiQOmBSKuQFloxxFDvLOv6Tl/OKk+FHLrMeLA94D4FKATQAQg==","shasum":"ab76d4fd9d4aa116fc2435ba29f8b56d58dc0c9e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.57ca2e73.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShgCRA9TVsSAnZWagAAIQ0QAIO4H/GWMA63p/KsiFFJ\njKYi0pD3XOT8YZshfA2CjlrYarQrVdbFgGs7NFQUq47r3imnQQGQcqXu+1G5\n/7PHNTnC6No4VsuhjONNsGA3Ox1v4ZRxlFm6EL++RT5G4LONfKV4vLMXEMuP\nZecZiWWkQMevFxgbmTe+tXh7mi7rsCeT7MzCXfvpcfjumpPBdGDNarZUoOmU\nyiSsr6P2kc+9oG18JwkIhBcYZ6VWEyD268toe/KaamAYw3Jkf39sne/lRBWT\nKPqTIa8x3tzQuxDdITsVqqXvBI3Ub+OaK89vs1G6B0/SvIN1qPgSKkbLM7Sd\nXuNn0hRNeCM4wKYeTzoruWGE+Ha9zBG4bkF9SZ79hTP/ruwSqv0v70+wB+RI\nK9m189Ak+ogAPgIMkPOtpbb5p5jlK2LKNi1ETlPk8Id0jzHzvN5MNoq7XkdG\nKXCotQ3ds/JtMq7Re0opMKgqCQ/8EKHnYqb2I66C+kpF3fEgY1gKUFT7A0cu\n/FOXj86TFDs1iDXMX6aLgE5kXW5Y6QwBQGTCAKiX9HDoe8k/XRALtfXqmWZU\nOOVz9oj4gwAstSvJ1wwLNBTf9j4C82kVbMUWg/SZrPdAEU37P3GaG6GLz6Gj\nPIoSDcF5YTbJeZkPPX3uO4N/SIFRNeeYD/ntd1KZOEXIxkFeln4WChs5S9PS\nm60x\r\n=ij/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFROZqqDIhPHfy3X9miGx1TuH5jr63C7NPPqMoU5aMlzAiADdNUJI2RW8u/Iv4flJtEKHx28brn+WZE9C22Xk7OOJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.57ca2e73.0_1616193632283_0.960763744336129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5c058f4b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/ripple":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pj4GlQHgatPSa63CTUXNnQH81X5gl7TC91MxDAjFTCpHE39SbEztshrPJrq+j8DFxDzmhuSlxDtycJMnQbUrtA==","shasum":"82878bf906a96d0789c477efc392b7b762b1ca4d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5c058f4b.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTbCRA9TVsSAnZWagAA6/QP/3WbbvQUv1iehip1PbP6\nSYkYZjwXdvgsG+KpwT7/JoAWdUjavFCWBCRfdK/shlgkpQEgLCZzQBuGfoDB\n8kkhsUIs5jelwuXuHq+zmFWGTU/tqMcIbcEhs2ZYpB+5zBzD0L0/3Uj1XbFx\n5zmemQcC9V4kMLKzeqroaBXs4GLO34026OoIn0jUxln2+ULnAlzimmv3rwT8\nHDFhWphb7tCA7lXPgVvA55tWl8ZWtqSDPawUG3lRQy+/QC7daVyHxw5U4sNv\ntASF84iIV0GbWwLhZjjyZ7mja1likLrOfo3hoTYdQHZ24388fQWojV9pecSa\n28eHH16COTflpFvH3ZRbGjaTo7/fh9tHLjvZNe0GdgMOiqky5agSVCA6G4/1\nkZsXl4NlrbXiphrUJXCh22h7HruJd/ld4rf8yV/K+YQSLqfXSFpdKZ/4+GfV\nOKniO9cGGwgiADOVSuAskNJJf2/omtzWxT1hUwxRRHZGPItg3BNRWkSUh45Q\n0xHqz8+d2P6n/QkOO2jsTgUxwRAREhtdOkmvS2xZ83LGarahZe7L3gD5HRJC\nyUiKFIbQ2Ge7vC9K+TinscM7uHmqmX4Mdhu4ls/x++0fO/V/tbjDVKNQJV4a\n6c+i5N7t5M9396UlVZETRtS08FwxzDAeeolO9987o7jQzwJ1Q5hD6hghhd2e\nYYWG\r\n=RCed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvNdyYHeNAsFyc91b0hZanMxS2DeLL5P8nq07u8qa2KAiEAnaO1FfriPf7Nj3D+Ix8rBDUA/tC84UypKRPeIPk3zk8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5c058f4b.0_1616540891556_0.3700878559419054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-d7k3EgSrNQqW6C4ekVj+c36x0IShGBgw94Ea82DGVQ92xX3YtVUFPRmJMq6yDn1p2BWSwWjGFYQVPCHoPO5PYA==","shasum":"419c4bc7ca30644c48e6c622ebb562983d9b7531","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.e27ef7cd.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XWCRA9TVsSAnZWagAAz9YP/isoUjPZcs3fSP+rpHRU\nobHRnFeHv66mFm8BZz8jgpntSXjpHxViEBNV5KkcFNTav94lnwmGSKhh+CKt\nbO98dvjQs9O2qM5rtMFrBkk6Y5BK3On2Y98L9BkL9NsXPq1lNb9FPeDSxwmU\nW5+GkFtifQBxT7LKU+J/bySWflz8dRfeChocVq03ed4z0d3umIEcnHFlWTDh\ndWLFfMUSAhx+pNYIagUlhYCD2ZYAA0R3XJOdl5H6Dv3ZWqCutBq6zMAh7zmS\nyxkfR0tYBsZyPxx1GdhxKdbEyHIVSGlus5BUiRq4ELLX+x3v7OoBFuULc7EV\njR/Oho1ylCcd11zpjg8w7N6H5fUTsQyr5r2FYTdiOixoFZ0W2GAbq5mF73kr\nXOdN25unqVuzw74qJBGXkWQ5klT7bf4tWUcjoefjEbgi3D2ihdzz1aGO57Cj\n9CZXZY63xpT45qGjdBZS4ZSg5UTEfvRigg/MyhICLGJzlzW8NCh31bm0Wo6Q\nbbsRPXtatDWT6zh4vmG3Z1In2GmAtgg2vXycgqTwdV9qzD/+BIq/frDdrBpC\nGuUS9mhITJXYaYIrlrnp0jP1KB3gXPubr1M6pWXpprZpzcSnLie4/YY553pZ\nopTSN0jX3xbYlGWKratdfraCgiyUOUDpUevs6+rz39bTWiFwDyVe7vAPPmMR\ngM87\r\n=F+/M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiFtp2OSH7hJLQnZlWAQFEcY3O/EEgCbyTpMTvliG2mAiAmnyCxU6dGqFSg13hsGsxD5atUVeilRJU5cdhO190jzQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.e27ef7cd.0_1617135062384_0.7878661550563224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.15c09e74.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ONMmufq2K3kBbP21cthY8quPy+Lh6gnyKFTLMrHoSb/OlCsmsuYnzyruala40EXYo2GjV9QiNYKKQi3S8JC45A==","shasum":"1f2e6da4099d9e2c81525575a3755f372195916c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.15c09e74.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKeWCRA9TVsSAnZWagAAx5YP/ApD0DafMdymcVH4nI7S\nHQaDP5EMHpCKToMHElv4kz4TcG7/SOuRYkiBnu/f4yW4krHr4OnJ+/A9Inqz\nVUUZFjd6pg/QzmOaflDmxjioG3Mv7fZE/myD5GGxBtbiX9kmQxNkhGaokTks\ngBd6+x1bu6WEYq19URn5585on9oZbNtVKYMBnq8pJSglxJx8PiBYJ8bQyPJ/\nlf8ItmwXaUERw7Ik046VN0l9iPmzgsvZykaYKgIboI/moEMSR2F2lklMA/YT\n5EZ0p6L2F3BYrd0RNDhEvK5EnednhnRmTpX0CAkzzBsDWFDYr2NSJgTvthFr\niIRQGJP4Pz6s5nFZO8mlj97fEcfegA4Gqy9YhEi7OD8cFmjnTDGEkhmy3uDg\n57vTz+CPPariDFRuC4HX5hjXgmxo90Qiqw0bTLL7b5uYbiiVxs4UE4nrdO/7\nX+6zJik/M9KZ+uanFJQZl0JNKaYzdOJH9vrnMbBDKOHp4fQbF7Yg8m95ldaQ\nwr6inNV/Ta/ZQ8ETsEl6z5UhKPn9rxQTlbH1UR6k6O823mtkgbJvHypw/IXr\nOzHxUHoaPBjKbRBJQ4af61Ssbax2DR3dvrpYxB2O+A1xfJ8gArjoH8VGi4/L\n5JmAItCZ13CtzcG1GRDlHVvul91/JipoLxeFplQrRVQmhuweBv87lKkk674F\nUndh\r\n=wfJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnaL7liSfaBXCKsbP9lmRmk7KI+ZQjhPI0OnNQBaFspAiEApU0Z1qNQnvIR1tyZDuTgKzKP3zqJSvp5gtDd9rtZL+g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.15c09e74.0_1617209237963_0.9788655465297409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4dc32be3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jpzdFAtIVsoeEEMOXPiE3MlPVPZ/Roi8KWDadFpN3CqtDflFjXUyXV+oY6VQKr+T8+YxVdDv2YHoUXszBVCghA==","shasum":"60c67a1afc2f014468502e81ca77060357dbc5d0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4dc32be3.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQorCRA9TVsSAnZWagAAa+gP/2q7LZkgWCYtUgrV3LEF\nJKzm+GvQY7ioPJc67KwXAYvfSCkPpDalUj8GvK4C8GYbFcuPQwzyOVAKRdgk\nn+lonqrlMeJ9iKJghNFkjdaxHLYmy5faUUChMpoiBSa1wb7mCSE1fssGnToS\n9X+EMwRsII8Ys/acTEKcXNsZ9QbGd2yI9Z+oXysHlnW4j1HL6mx4eJNa9Ldr\ngZPGuSIxwTZw8z8LywZYKPzPFabDjdSojlxh2cBPyOxCwjJW5+NC3U6Fiy7B\nI3eAklnPn6ppgCxvseUhPkuKFkqg6CprPf2YytUytedLCIkdI3F+bszD9wE6\nZOCdt4ATJfr/6Wv+iS7SiuFPskvGKE15kIMj7U5JqChdKPlWR8IdjDLqOXVj\nkIEZd56jA1YZvSPBowI+vrb9mnQRquMwqZG9TKHQbtbeHG+c8GvDe7DFaRak\nNVQLvyhtF0YMAbnKACPsV8XzEp8UA23jm4eRtqrGuEzCD4pCT2EMSMaNOCCp\ne1WtqRnsG+jBIwsIDE+oNCzB6JDCwqSzRuRNzR2haxGLw9jZ/ZQhPTpyFNh8\n+5fan7XWcYNBILsfUUebqz9TBzpOOjiSRLRtY2o40ZgHMavN4FnzvzESmZoQ\nJVZ1jCmFFy9rX7O0s+17ERd8Xh6sFzCu/2DdRI80kPKI46fXZhlpH80K30HG\naCHm\r\n=4P9f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFd14Z+xI9R11CFEybKhGvJHCuAifGFKlVpFWgTN4lcAIhAPab0b6zrTaooWkLahBPt5WFZdf2VXuAGPtzy3WoPV0H"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4dc32be3.0_1617234474730_0.3337577001449674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4b717f65.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/ripple":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VCFEjLnI8zk7PE2KTeSdwfEqQHsdxqxEz+1O5nwF1icTdo3sXhbCjOqP0D6amL1xvyOOjHfXPtr2eQZMSRZSfg==","shasum":"971897776546812776cb0f1a6584d52389221797","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4b717f65.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1qCRA9TVsSAnZWagAAucsP+QH1cmgWNBpnHv4KTZqu\nlt59gEPizJU6lJTeBYLbcmq63ppbKGWJ6wm3r5Aq91IjvHGLv6UGcHkS2R1d\nxMq93pjy3I7Hi10cYY++2PpkbfVD1kcKUDRgg3mmdYZtjXy6ko728bnz+siU\nhV4IZtvMpX4JagbVNWn9EeCoW1RF4yxXUBs93o/PV0AF9s3fdZrP79LYsSIe\nJW3WCj2qcAhW9UizpEBhfI6auliMzLKTNGEmw3Y0MBIGrr6orlhI9jbPhvBu\nHZoZbANBpEfxPa9LuDcVsLkQRTVFTH3StlUUBYOYFCBPkN2S+HySHzq/UOHL\nlmafmLvhOSgcq/d8zOzlsFqOqqQjn5se+NdSQHdG2HaeYvuM/8Cekl2SoOci\nE9M7E3OlB09NA80P/dpI2eLXn5IJjY9Z9L31WQHnAZjtmgCqDVzhcRuGeU86\ngmZe7YHo8gSs7BSYKKb1VUBEcJspmt+Opiw79cgvS40rEEgS/Gx9VAElSJUo\n+VEOCtVwpTZ7xBFyRFreNQ8OehzyEjdubMLnJlMqN0QN59XqVw8CHNQWaQkN\nN8VxWmuNil6Or8NUDpGKBbUZ7uRG/LnF/+RCGbMKqoJ1R1+Y8SmppfExqwfj\n7hueSc3fvcvNy2x/QHKbigXFqxA3EULIQ+uON0ghnAfwnPvf1doBxRAcMHgH\n1tL0\r\n=IenW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7TFMWtYqE++SBTfJG2UOSxXCTfBsaJ2pdtKpmX5cdWwIgTHgHwHQdl0xzJFFD13Os3RoVy+ghGF0RbsFFse3ICiU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4b717f65.0_1617300842347_0.2374219799744206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c6870f20.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/ripple":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jnsSlGsh993s77UTT8Zu7Ig5fNYdOlNRk38XSyvsqqPjkCwsJRgdb3YtGYUyraUsR7W1w4RJ+ytYNjancZSUww==","shasum":"8259ea42bc7bda8700b1a9dcc13f434c15b67173","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c6870f20.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlo6CRA9TVsSAnZWagAAjIoP/RDCvOjpq0aBclNRubCR\nuB1Hdp8tp6EZ22eyI8p8CeJfSu/5IgtCs0G+hjRpWcBMG5pQTT0s4GTSOpHT\nuoVVPZt8IlpU5rLJu40/1ltvFSAzwAgpINWKEBfQOjEy4MnKTj4jGqb6SRL4\n688CxE6S00nXidq09JuMLV15TcDHrApLhCpikrKowrue6GKDD92aTGegMVMT\n6awryeEX2nCPMJ1LXXu4rLdjo7zAdVs2s0OrZ1qqei5asTXN4sN9nq+3I9nj\nAxBPp+blEk0VsEzxF1kZES8FnUZkZYxed1HEYGDrNn2TXVRMgIntenZTKiyp\nWCNsSSaavs9AhQmSWOs4pjIai+ToLbjTfjrkgRZxpnOKbCQP5UzsNEedb+s1\nNBWxCvxiqILguF3gPwZqS4SK+wskkMDefoe+yJ+j3a8DQjV+6UKaNJGN5CFg\np3WA9BcBwmCwtQHM7W+OoXt77BFXwSmiHxiyiisEYI5j0nanmjF+ZmVJYK+L\npvyJjgDLbTwP/tMhpy+eKZy4chY3WyJg3hYiFRA+/04iCCBm9nP1Z6UlJ1t6\n9JMrqGm78OGLrqdXAqquoRWibv+73lBZc0MvOgKbfGGO0mxYOKOr+3mhwP7K\nwBFMxRUMfVDdkNbsDzVPv63KCUsVIlU5u7D+cIWhzZsWjCBj1+dkqvNvlk55\nOkSA\r\n=ezki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXItX3VMQzIKhJMH954Uk+k1LqZ2rSo0S6ZYOwYkBklwIhAL4tKLoZZqjCbCnMJWRxp8/lcbWZDFcOiAnWniFjs1JM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c6870f20.0_1617320506395_0.4629248976628384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.852f873c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/ripple":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KPTMuX/cTB4JdhAGzTcQVwJQH/Fb7lJgsPK0uI5NruTYdGMJ5ljma1WiFJTbtGxr0Kx7j8esmy52FMdamqp4bg==","shasum":"ec09acc4d83d3528f6ff6d3a8e519805af7bb99d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.852f873c.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqnwCRA9TVsSAnZWagAAGDcP/3O9fnxRvMUZbUDRppa9\nZrMe2n4gdgIPLhdihqeQdKN8XX8MkV75Tvc2lDOmfc2JS5hL6adw6xfIH5YI\nd8kCtEQtNIEDqPdoaD0Su8MvFhTzoNJj/+mj6aHHN/c6IGZo+TUMatLfjC9B\nCyjRcj/Yvp/nUlEHeJUBQPlgJvFkcYd+VcDbzRLtWnaXPDEe/wHfB/ZTzrSp\nTwrcMtCWlmzSol2lBXCpZzKOcQAGnsNwADGfUM+EgMdxa8r3sB7AqbwpeiCm\nqz3ISzN6NrllV37MTGOmuPRUGt8Yip5x2jr3sX60TSYqkaj0P9AW1H1dc91/\nyl67lMw9i0XufPUsUMdHSHB0Nm8TO98gXc3EKkObgT4pl5fuOgzBp4m0phz2\nrcOA6I0G/JQI5qA4MePSt2/Jtpv9IAZjf8y7QStdVhP71ZKUPOX4ytuHiE2l\n8+l+owfhUFCzMGwYZ89FCGHQDmZC8K9xzKC+xB8E7UdoXTVaMgGRtxx1Yely\nkZj8Wh2sZ/4hN50eY9t1F3jWCh57Fh9g8hPABoKQz+TUgG3EEkuMssIqLvGl\nsQi16Bzz2DrT2nD/k9N/eHS+xiPcBAHYUMSuuf89Mfi4BxNAMKDOD6v1+9xd\nRZLDYflC2u8gSqA4DuhrYOOA8LhSeW0yQ+fcG7T00djNs7FjzZO0KUDFSGQG\nVCto\r\n=1x7P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/J46+1f7Tfdiyn/kCXnffkk2YcjmrRUNoOiH1CkzY/gIgWDiTiWWEUHi8oYbt8J3J5dojV2to3EkjBnoSMc5LXzI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.852f873c.0_1617340911315_0.2460459353821811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.4a674a1d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/ripple":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CkcMnLUgTY2NOsM0sIbfllQ3m04FkWZtHKDBlLDVPKVGhbDKwlfcDX6QdBKEkdr6U/NnrBuC0Men4hqABLAgXw==","shasum":"ec4f452a7328d902e9107c7833afd2ac1acea12c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.4a674a1d.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy21CRA9TVsSAnZWagAAFPwP/0RweVSiP8mQknH1UOO4\nEqI1IRmj8i/5yn6ApIRRBwsOiEMWu91pXPblGE86Dn58NZx3vhuB1YJ2b0SC\nyADidC7T9XXancehZLlmWtMYxR1d82z1GCIcES6x1tVwq6khwv5CN2RpG4kS\n0uh8As2YGk16kagGnD8+LMFceYUxXGjBdAmzZBDEC3avE5kwgvDIiGkWdCp5\nQGLqOPPM6YVQx2aVnc8KbMVoh7U4BtbUS1dPRVQNm5sdx1RSkjcPTyNzVH6+\nKPipvDnNyFzm1M8onM6MtDSq4jDoq6tYdCwLWMGxV8w99wWTEAW3+7vu8Ye/\nIT9dbhhwIpdMGSQepCpOUw0GigKt6Y3lO3laX2Uor/E2jOMCmVD2PjcQGazx\nT4D9f5dtL5h48xYs+RHrSy6R0T4Ox6XbZcdO7KHDVSlN305s+YjX9kODGqu4\naeb3smaxQlrzgi7zipTzWhcI9+tudNDi64GpHmbf2nyCTtK0v3twz9iMPCbL\nWm64k6G5dSbmkMCmfGqb/1h9rbpcL4K5qFMoi6CU+oOhM91ABUZwzamOCt2h\no/dSqazbKAaZwRUrGtMxJ6MXujRDENHDFHKH6I2gTW7xg7bj6Jl8OTZNNAcN\nadHkoZ5bU/7/O7tC+ObQR1uWqrBb7Fz4ryTgqQEDWBQ00i4D5lwYRlRaJX/3\nflCv\r\n=JfzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOKM16l8HLMVCHcl05O6miQz6WXlgOWNSLKTP7DZuoHgIhAPl1yu7DgyyY52lQ5Or1LXd1Z5MNZsHuMChIg2ibL/cl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.4a674a1d.0_1617374645422_0.49326989264744103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/ripple":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9yasBuxYaraEGv0tqB1NHEPJU4JCq0hb/UA+Z2Dj65V99S9s7ceSTiC9hEXxCn21zC9/aFsysWYDrsmPPIaZnA==","shasum":"c25be3dde76939eb97fb5f30b684eb7499915d5f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c5b29ff1.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga022CRA9TVsSAnZWagAABs8QAJBZYnaNIusWAHzkiaYy\n1dxM84+VB5FgPy1E1x4+dajWMchWLTH0UgCh3rqdk2x+57J88DgzS+nVvrpc\n6ruzUKYdC2ScVk6kzyCipsyHrXVKDs7y99mdGF86kv5fupj6fSz7ZaD80cwr\nHLY02syB80h5ijydqKLRW4D8WxmYH1IvoOKFOa6XFjOMlLIjZSWK5d3WHkmB\nxESRSULFYX2X03vMMkUa2mCtK4KFZVTvPMqKmYqI57ChgWjb0kkyb0EHnu0S\nOxtQYIkXVj0u0svz57EADz+O82SYav7qdsnVhZVZHWFbCcijGEtj+frTnI9S\nT6kut8oUkLVpZnkgBXN0E0mxaCeIC8V3KVleF/rxLi/spxdyUPMbkIMamxwl\noxl3KWh+XwEqoeKbSGsm5+SKnkz2p7oVrZg5EuZMVnZfhMxSeZg9YMV7bNCj\nu9wVRCWyj/Ffcpgw8S3tY7IIZCUP4ixLV+2JpfKX/jEjVJCeelAKe35G5aOr\nJEm0jYN58hgKa8jm/vuAfN5V4+bUvmAW+EHC8Uqp0babJPScWjqrybPbWsR9\nMtL3xx1FRGCw31QdKpb74IPdqAZ5ZWfJZt+RvDknfdB5y4kMzJr0LSxDx5rK\nTyBYZo0qMaN+Tbe5jxvwNKa3XXTs5F7mL3bwbZccsOqh0r9/IQ739LLUpPqk\nhekI\r\n=TFgX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPMm+FzuzvrM97xnFaaHW/FwV3XZ6CwzHEwjEmKdEBDAiAIQuIx11g/WvfnmABTUbOCCddbTkMQhmNQz5t7Z3ACCA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c5b29ff1.0_1617644982532_0.43133359037924857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.583644a6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/ripple":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-X0TmBSW7722IfhWhzbJqB6jD8fCH8Y7nbKU+V/wODPFNSLVUSeWdShvnEgsA6EDs4dbk9TtXae4PPvOdvKrXtw==","shasum":"21c8dd4ae86771d81bce7fc7211628d91198c5a8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.583644a6.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga031CRA9TVsSAnZWagAAlfIQAIf+545/GAtBkUaCuGPN\n4hyfGO6Xl50MpoG8WRW4pNu5oB3/1lUFzeQyoJ6uClTUGAAXnJMu9A6pj6F9\n8O9OXvlewD84cTOFO3LWso2afBcAvcLA/2r4uV2T/66SlKCv2sFrqHuxB8Q2\n6ph5u6XlkMIKjrIHWPXIxefOdcr5Lpsm0ZojgdHR5IhZzUEYWHeS8dW/suU7\nAxGlVeBxURFjPmB8QUXUs5uJXe5PmBMlSfTNl1mW7mD4AztI7P9fM8Y68rL6\nlrbzYxyGOru446+ObRkFjMkF0hQCeHvUcv+ksysA1dZnBScSpU40O7cd1xWc\nrMfDbtRtK5t4BFH0snZUBzzN4jO4AvXIhFrbllezPA7oePlm1D76ZiG8HBTN\nwEBmCKtR7Gu6qcmvW67DlnVhDriFbb3mknXe17ax4bPdpWiE9Idq82HGfVlk\nWQNLTI0cCVx4NAOW3N0+fSROQGpyQtbFf2CHqqxVdxA80063F4/7nHRZMnwP\nMUhM4cowHcIp1TOjng3hAavK3FGbqeM7fecmG1qpPbRkczoExWliAUcaL8Fn\nokD77LMpJsit2yweUU4uIOivRWwkAVenJSWPkJ3hhB+LzIiGwQ1nLUOITTqM\nqMfSRaGv+8BSLk+dTj2Ny8QJnTbeZobgJOcD919RDrZy2DXHVmkO7E5Biz81\n4Moi\r\n=BZpE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPbs7fIDeY3jCxxfKj3myjXUxGaHzNp5KJmO7IcARv5AiEAjxH/Z3LC67CX0mNOHgyqwa1z1bbJzlztke8IP+246/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-ripple_0.21.0-canary.583644a6.0_1617645045310_0.8756428356901833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oke0BaXsq99dVIHcIXR8HFd6E27RfpNJl5o/Nk74MycgKHFpWNjSygWUYFtov0h/7OxRL1Fhs1cJSEP8M2MBeA==","shasum":"9a387fd63c8f0e63ee9a87651f2f50b1ec2df668","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.02ac1e6b.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoOCRA9TVsSAnZWagAAEnQP/0hywc7D3oyLDyWq1XX1\nQ0GS7RiKdKUI5zFtgeUJBy9eS8S99uqYTj/+6GRW5tkfbVtSlBTArBL/flB7\npfwScib3pgcnIwN3zBuJbZbUgJzjFvMfJQgSNTuJXhHPEh9B2x1mf3vDa6HN\nPILpE67Dj496PpnqJ2PaJai4JOOcNYQBDQCIOjf/W3DPa6cDANMi/UX89A/n\nHbJ9mcO8ihLlH0DAo1mL6YEFupl0FZba6CyMbRcnrNi6O+XH95LOVuprLRCc\nF9HbYK2bGFX+kqlAdv0HHkdxL/m5NoPUjhuCI9MDvDcPgN2EeOTT3lN2MDNP\n0qoY+183nLyPF5p8GwkH6WDmFt0ZUmHsaycnh7G76eQNy338yOtTq2IIYPwg\nj1SqLJawbF7ZdeZpl244hdWzCaUxfTu5UtSth7pfDVPpy5hcc+lFEt07wLrv\n6tDWZmNjyUKg8Dbkx+SHg9X+kD/cTiyjVOLkaOBZZvPFwo6TulFovSvDXLjj\nL1CaNOwY2FoMR6HgJ93dZby89jINNkmSiLvMnryFBqobbw9yG3AUBcsjeacU\n5G1y2bwbFUniT+b6at/UEEMHphWtq70x6K23Tui6P1sIfukA/Xviun3XisGt\n7GUAK2hnaSz98wG9G7C5lgHZPuYpSFxMpWS3XKQk4TraNYV1W20RxYj3EOAM\npthd\r\n=XPeK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoe/D3Frfj9DavVCRj/Bfk4V0YjieKk98QdY3G3WMmQAIgdZJpFXInjY/CQRr78NNZKyq/GdQYPQVChrqBkSrBLv4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.02ac1e6b.0_1617734157856_0.35122293143653494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5ac5856e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OsM/8AhKjq++crEIouxgUX63hThePIZ9HVg8vqdnAAPS6lohJjoOCIBBxfYQTDshKGB59nZatJ4U7hnEUZn9ow==","shasum":"e42e28ccebad96646f407da2ae1b60125f31b054","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5ac5856e.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuNCRA9TVsSAnZWagAAzMQQAJD3ndE2NQ8ayjnGkilH\n2snSEpRDtmFh6NOksyiJ+S5+IfRI2Ch4Bdu9KkeR8OUCUt3sco8RU+ayl79R\n8Y7WBnnRaH1aU1MLQeyPe0ZZjDGr+5iwl0zk0522jybVnA4nUrZ8XsAB89O5\n06ZpNNTfYWnSDYXPjqvnJCuN4yfD2EdUsrlnVnxa0s5HozWYfR52Pb00vNsW\nblfBCZaLQ1AUSzHS0BzsxmNOQKRDusWIqJ2UhfS/v5cwo6t1vAjZlO/sSnb1\nGhspuWRaCV4PfWrrYCVuaAwCfi4t0UgpewPp1ag6gzEDvc75z9ByxjwTtI8N\nYh5gdHvFLxMc82/zh9qH/1FC+xgkRut0vpwoK56s9p9hzjqIHxRu7ndMrra4\nXxCKc+EP5Bk/Hv/zsgRP6BBU3hrpYputWNKNG1MENO26nsN4KeslJ+T1iCMW\ntqdUUnlrwKKmdT38jLWtFh8RUwXHNQyD75//tkxmoI13QtidFm9D75as63wq\nMyVYorAqQik8/RQ3CFHfhE1QhwcsK+31eBHVc/rHmyDXOkDszQG217eJO6bW\nowrSavRCGCZfK01XzCMoFqXvILjnme6MakgkdtKjfgOtuffNQ8m2yoh6RSDl\nlGG2wlhaChKDO9JMRywBaq1LuJtPHguc+sxvHXPOl/P8t5Mk6ztYPWcxPWbn\njhq2\r\n=A3ZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3hTIG3u83LXznGr+FOy+ym1mJeEmSbvIWvfSE7vJPtAiAWZ3gAR8+Y3yBXO9myV7KR/5dh/MW8wndU27o9RRrW7w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5ac5856e.0_1617734541323_0.6834933924807893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6gCuAu0tJG7tJR4iwwDql6Rx3CSDTdb7ET1EfRHgaJO/b/3vXRoSgjYiCg/N6NpRWvB/QQoTDal10nVUENJCkw==","shasum":"f2359bf094ba6452adaf825d193f47c59c33c13b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.bb23dbc4.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLQCRA9TVsSAnZWagAAiWoP/1Lh4zXXofyjI8NIeKFl\nnpb5HGml+93uG/anHe4YgYyNC2nLGEEDQZ/Xy0kdaKVrzVIXzgvRSev5vZUv\nb/YUiMtjPx/CrKE0GOUXwdAVlPb4sxrfPH7bizS6HIm+jA0mcWlARTYmQY4M\n93TQhQiyhAF/6K8q1Myz0DNdw6AuYoxqMDFqmitCqiRSvTTxXz0RlHS3FZF1\nEQb2bIzc/hw2g6KuEC+Ul9iYKfCLfF68MO2pQstG5wVtDX0KSdOHL7mGkSGB\nyYpxXq0cPxk7dyhRKWCL4vJzinYoJCEXTqWDI7P1jBv7xW2J9fw7pmqzZQOA\n6RuCijimox9WrGmDR2Vm7m54yNstdwyx/IMcK1ICxG84iIsDSOOuiG/N6SK/\n/FuANRXMqtRSC7+kMGD6xr2iHqtW3+5qKc3N84YsBrbyxlTNsF9gB6wT4qTu\nBqBYp8Yi4Q7JQPrOkK6cXVxReWWAu+8zdPsqwV1LF/7PCaLvdz96J0s+WRO/\nCxX2onmAE0jPumvL9WUgcfZcjRGAteQAoBPZstayuuE4f0e3xiT3tPEIcKk5\nTftAbwCNcAkS0SSBJ9nu33AVeEdIMarL5kb1EKNUAuDnGFX+WLyO3N8wg+Te\nDqLYR5P2xlb55691vhZQq+j1RU/KgJilAE5ypf35O15FE5udhg/0uv16Z9Xl\nuNCs\r\n=EZT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfLB8yQJ0wy+cwQoCxQaKhS6dL2ju8f3ylAG5A2nqpsAiBheV4DjJGi7lXWYB9FDwrEWvvxf5POjT0c+sVSUIVz1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.bb23dbc4.0_1617830607760_0.6230361245835032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.e539904c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/ripple":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DmUewR1UeFMpYwl7DytxOVWncMxTfc5QUQTqDgj1gu8aEX1iw1nYcGZjsiSRYcWkdkp6K8ooW6L35clZXBrEig==","shasum":"6989dd1c1de0397efa67b5ca7270f0e45559d7a4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.e539904c.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UJCRA9TVsSAnZWagAATPsP/AjwBVIlKh9fDlp/epFd\n9nRl3TqwaQhBvKQ+MNizFgl6/YCVGKkYKhNm7qgAsEgf31gcFfpcbZZIQt5U\n47U7LGpkbdIGVepclVsBHsuXYM91DuH/iHeRhTaQ3ogskfnNuW0mytwE0fQ/\nVAK6H1CKdl2FrUUJLcS+6Pst6u0mr4a8/UCByQn6atYe/6pvCxNam06Wriy5\n1uiKnMLQtqN0LPMMd41c5ItnXhDmpNWuxqPLe5Wp7NISL8Xo1/rTr6UxM24r\nnyWRNcT95fwt7C9GihtXuf9OdWnqAa4AKrlNjMd+ZDJPYcilfoS9iHRKw9Zp\nKor+qlR5ZSmmMlx3HyH3FAgf3u+kfgmm+iGWoKTDRrETxHG1v5jySZ7wblIC\nhX2R5IfNMQ0fAztCrnWjQeju25JSolv7onCjhWd/r3/bLJFkqRP8mLX6Rof8\nOCi7n7omzx2YE5AmN58cawyIhhwT9g9IL+vGkSK+c1Q3urxRAuRd2liH3TPs\n1A87+BRWIaY8yguoCL9gP8z/MIvSy82VHUaxVENjMw1+/kaFgcXOTRGIxsB6\nkgq5OSw0hLZoDag/gYZf+QwlwlSppCl1d1O1WCMQFANLEr7ApKz/wopVaD5C\nzedkKmRYuN/Jfux4EaXJ0s6TA5kBUz4xe0SbNp1K9SY/BZBZojD3FflBxxq+\ncyC9\r\n=rgug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkrkUKKa9A6mu7G1SqEyuTIWUVpq3poEElMnps7DcOqwIgDKe6mkOspRj3xfj9ComTSFoj8FI1DdjUrwfAl96GIWg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.e539904c.0_1617904904790_0.7809949594253953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.a93ae333.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LRMgiNcxhSe/bKvOXUBvPJPRpqd5BdJctpHtaNmL6TXYSNd3KEzC5cSshg0LdlHuj36i4cljhW+HBb8ZAsqf8g==","shasum":"ed5a0f02eaa1d18d756cc65b316067430b4db08c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.a93ae333.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTVCRA9TVsSAnZWagAAKcsP/jqbhUdAZzn+jEYHLMUZ\nGUIBwleu4ItHEnd6RCFGwwyxcmNS4rpQTpumqXUkkCn+Ik3eT6LoqEzSZnE8\nsV5WfhkidH8kDpIjdky5kIZGAhvOzfRj43FnjDN8o4mTDw2Mj+xzmzuqHnpc\nYXXFlZl6jurYBC0pqMjzq51tJe2HUxGKwh9Dm0ezoFNkylRCi6ocNYaCgvHt\nzPv0IC9zml96Z/8DC2r8/12T7zve92wtHoLKNtNZNOOCRlRQZimLXj5RsvRx\nIWWNwswIatXFsLLHrKxg+NxJVtM49KFbCZu8Q8r6wkCBWOBuRxWgbuSIVsoS\nSgtOfdOu8z8mEosWvwn21BO0RYoZA4n4P1ZWhhrNrMvYZblZhx3JPJLjW/RP\nPkKVZyZUc4vkwQJ3UtHq2qsZj61bGlA+2ZsI6tYLtonn7rir0XhnzpeK7bVI\nBPpErtUJ4GJdK24ROg1Sycual5w9qxhx3K5bG96GL1dW+f2fvcnV3R6ZaAHF\n6OyUo3pf5KXIF4R2UUTIItBYgqThnmCFS+kpSVKdzTSnKxvLFK4vKdgjebb1\n0ew7rCwmZvbxKzutBlVfXQqLtT0n/GivC00/9/VpMsuncpac6P8WpwPkQajv\nN5hlYuIjgZztdPzKbl38PsWbNFk8XCETTz1NrX947kGWQ+WGmrgv0zB9Cq3u\nmdfc\r\n=xDPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmp5zBuljUxyLt10XdFzKDt4w/0tK4AZdTlr5BKbOfLAiB4w2HG3S1SALWDudZNT3QqjplptK8IaoKNEGD45PbeJg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.a93ae333.0_1617999060761_0.8076497739615718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.e142c144.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-clyrLC3vZcBkOWTqdUNJSJE6EvdvtZvSoQZGo8r9neXQVqQ/bDOYX9rmbV/Lothed5JcqO77FaeB5b9cSeQKjg==","shasum":"c669181fd384da7c5455ba350889c10558192a37","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.e142c144.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4oCRA9TVsSAnZWagAAZOQP/1QPp8lKKfqzXs0amb8T\nbCBn3niimoqlXmO2Z2ZAaggfW6GvuhdxG5I1uE8xkkhE4RTw1VeK59dm0ul9\nVkN8HS9DpxzSqj6IQa2o/9bd8C551RLVM3OAsLL1QB+iN1fBxFgufaNhjq5d\nU514C9EvHxnRYQRz7dtrY7sES8Gzeh4pnxhGK9g976LP/sqhGP6g8BZDsZW7\nBt4YH5rjcGXtPc40oR7O303oRoZLg1INdb8M2zUcOGEiuQTtqE8stSolNmM5\nNSYgfW9me7f97QU6vBMFDLLPljC5NVEyGE6TAbBxVE64AqaNAKRijPTgwFeL\nfkO/UGJMCRkOkp7NxVdVZ/aMXP672a76jQ4ISAaxHjWjvTamGeQ0EV/2L2+9\nnrYPBPIVrnrIp/HyPhfF+sxoxAVarI/LQWX64+dB3AsBTgXbq5fLZHsvuYeB\n/ORvDJDg1NMTD1s6SKiuIQPgWScLUmIMMfBXieD1dKNhAZ2Vj6gMm+8DoNuq\nIbdac/EOoi9p7vdgkdqhVoY1aLObnfq1WbD+Kg2+J96SZTabHa+s/h/6A3kv\ntoD1Nk6oZHmkyD54iBG4ZYThdbswSRAPHByHQlsZSpgTn4iRIU6ICiuPnkAN\n+Bn34MxcpxOsk1dbyNnu76bUXo9pndbCdkZfuiXMg1D7i2vN2ilVstpAnJ5t\nNDFd\r\n=CMi5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9X169BNHzwdnsQRQsYIlDBvJz3CqZIKnZGNxJqoBnhwIhAKLqMOUsZ5+8HKvatYgf0LDTDezhzYREYz0zgt+muQDc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.e142c144.0_1618239015912_0.9513975832906061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.382d7eb0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lSY7SJM49iPCKK5wlwq3Ge5pi6v0zFGI9Lu75ocxYiLGH9V+Iefcy0aHwjhEltY4DxmrP8ObuFKHtMiAjekxHg==","shasum":"f7127c889c11806f46d4b3b76c0b1722bf36d361","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.382d7eb0.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQTCRA9TVsSAnZWagAAh2kQAIULW+utwDbAROCViT/G\ninwqRH4hpbaEnJd0a53avpr7NTgQO8hskm9HGOGResvHu0a5qI/zjA8+AY+M\nTFeKgShb2CwV0yhcSDr1VOW5QLEQFXxvtjurWze+1oRn7eeosNP1dVdO5YXY\nJtngQw4stKPGWD2LXP3dvR7Nlerm35it4yF/HnQvjt8EWdQDcfZYsmGJQ7Ux\nlwOSP2lR+0gie5j4bt3gnef44IHbYWALWVqXaP0E3VnvZjUxIs8n6fjEc0wc\nobPCPRWk8eJhp/XIucOg2rfG/FtpZBSa79DKfvkq37AfZkO55cXMelUg1Ous\nRsKSPpgoKDUCE0ncg2irgnD5M2QubP9BfcgoZGwmVxyAATc4em0Hn8d3Uh1K\nFxBS1yFxXKHVT9WT7DhynvGxVBN7JfTPoF1BSA+6rvVRY5rPNH62oxFNswK0\nnZ3FOEWQZjEqdEFKSXykFBbIRpKYcOLrLD+LZ8Wpi4hTJYKs/0JR8Z4kp2iL\neX2TMRP/a0/GV0sqx54Iao/gbl1KILy/8cEM/HK/45gd35h6d0trqLz3ctem\nOq7TyF2mCI2tu+EXOkIRgDMy2p7lItQLet7J7AlEAnssmLQJFdUIBQSMa66g\nb3h3Q85KeCloiU+zLG7SnpZz8b7oRd7QrHzjnADtShA0ImjeCOQpujb75eLF\n6kPT\r\n=ghP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1ZwzTUf/JdkebfiNze/5X69rFCmTeokpLOHSo9s2l0AiAoWITK3Rb7rj9aBtzjI5cJpKDjOLU72SfO0gvDv2EZlg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.382d7eb0.0_1618265107515_0.9583384569042839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.b16c7885.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/ripple":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1YjVT/zFg5o0SfOmLt3k3VcfxrTOQztpy98ClsS4S/wKngpfyL6EXXFyE9x5ZrE/xiDE5FTgTt0XpNvMCmpFig==","shasum":"9093caa476076cb89d211474780f907b97d465f7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.b16c7885.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMv9CRA9TVsSAnZWagAAfB8QAI/yoY5vyZ6YrO8SoWZd\nMam7/Fa8TG07oB43vUUJKPmUrPZmg/03unps87PTaZa94pD31+2qWf5gEUbd\nFFv8RDc+Bkv6ovb7Wuum7zpvMKWld1njgP8QtKtJAfRa5RzfcNLYQFKRkOhg\nHlcQbd2WxvX2xvJqgDX6ktPvwXCKeeD/Wjlmye0bkqpRa55IsUgp455e9mes\n7NawStsEzRVO6jVGjzDyecQYr/p9Id3Ulbhmk8yAMp6UYln5R+5+SeIhQBSw\nPM4uA6cdSy3B+smX4TI8j0s0HGF3auHD0ikzBWQkDjkghS8Aw7eII2WxUtsN\n4MjHOiVU6dcAEr88LGaLc2gvFatf4KIKFjFLI2ffkuWu5fBVlrtTvvsp/VcT\nj817bnWPmy/Wm8r7DFUzS3bIYEP8mu1OD2q9NteeYEVKFEXoBHNhujRDixS2\nHLuBjiGzYaI3jRo4zZ3tRf2yebUJ4lYwOKV+vpzo1sfX8vq5bthBAIozbfzz\nmf8NeMC2oDdtiKgVKF03sQH64tNea1X5qrsDHUy10CQo2PZVvjYOxqaeOpNv\nq34TqEEDv5Ly5/lwwDilf/l4pUkjTf4GqsEbnXYrGMch+GpRi7sLOGKsaZLB\nC4MOmMW6Nt49xSTx1azAogUTbEAtakS0KvCdobDKduqXwJAvISxvg3wBac3M\nIRBW\r\n=GDM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlwEYCBREiHs7QDSAD7XlMp+RgReKSMOUr4j6EesSyeAIgHzqQGSAa5LJ1eaHAQ5oXnDSxminXDOoyOPtZncyNlnw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.b16c7885.0_1618267133388_0.4064434448916159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0e92782b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/ripple":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sJYgFa1fGY36VU5d8sYCwJzH8Uzkjh792FMPiczhzJANkJxcFxQ+yirvU+/zYa+1Ure0CukXe2EiFwwvZOF7Lw==","shasum":"78232b530f6187fb5b418be9831955e0d16c5467","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0e92782b.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2aCRA9TVsSAnZWagAAs/0P/jbk72wxSTxOMsAW9wZI\nzhwvor3jrpyVZembjZq0ul9bZmeVqGbyP1j4kHimfsKeTqXHBMqR0cc2VUpx\niAGM6QAOerV59bfSWqXCE6aJrDhmhhHrLIAk0lt7C+QZX8JL7Elhl/nSlCz+\n0DXwRDiHdUOMpLHSXCuCrbmUEJBF+1aHuzWLb8xNb5H2NWL4gblc776z0SdA\ndDA/hvFELWmrK/8usBYwqqzaHwBfkXrfwdK9Vs2+n5PEEi0XtAs6hzypOHOj\nmBbY8DYnaFSruo9ryPU4axQykCDMbKOwG+visaGoESi/GI5s2D72axzYXYb0\nO+WGqrwcUbDe9dgX9LwS/H9+lKir5jZmhlP0mhhCTwX2lb2QBGry3UhP39vg\nUg7OFvscL4rJZIG5FvGdMujmy04HwOgk0YWQp45g/Ym8ObhfZzs2R1y9Q6Ww\n5nIOMNgXhg48NzYBVUUrgS65sb2nXkxp+msa57EMR+Wbtq49C6Fd7LS8FigG\nu2KlYlu2dn/lacsDiwoR9t6IfdAmmU1lhga7/6k2VLPETNDWbWP1rQ0lPZqP\ndxXrHAjikddCWAIUKbPbdx/+PM3v5e9tOiAeM6VxyXb0C5wFhFrmHpqVLxtk\nbfCqFZxW45nBf9EnrQyDdsditLuv6errqGxcxmKVcCy2ddfaLatH+yYPwKVS\n8A6N\r\n=0PZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRZq2QIFgnAbQGAgZeSjD3krfYr9hxuqu1fxLXJGaWNgIgR+qmAPdQXHpjPfmKks7bSd35PdOFZBrphoJejCpzaks="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0e92782b.0_1618324889577_0.6770592557636201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.70b3a072.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/ripple":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IgPUwM+Cc1RKxkyZ7rULrrJ7qHMBWKY55nbXvrKh/bKknTzJXgJiypH3pLfZhNc9/5Ct1NwkIlBptuEa8xvo6Q==","shasum":"327347a8debfeaf0fa77d0ad1d27362970688e88","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.70b3a072.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2v2CRA9TVsSAnZWagAA32UP/j8MUFeX1/MMhJ+FSl6E\nlAe2yRcl4eThkvz+42RMV3yWbDhshLEK6I0MMHnu5JzTajy9LnfVnVtQgp8r\nEhiG5It4eM6tRvyhxq7FfJxksaA5bRJDldQ4K+41QXVkbgy+w6J8Vm6TWeFv\n975nFV1HdP+6yZHW3JlkNNXU23RaIF4cFw9stihog1kwf+OARleDFCUHW4Zk\nAiLX8z5XvwCg5IPLSIkQOGZ/133i3mb4Z7f71sDMYxPbqKAffti1dQwiVhDQ\nZYYZGHijU/CXt6YqzA2FBADPRG368bW/tC2lDvusCteFUhl+aNzhiFYEWQ87\nsP+8BbuUyLpoPb4HZQesTivCQkM6VLpgPyhWCCmvqzECABcw0v/P4wBiZnnW\neCT00FHJUk1JonlYA83/fNgjmFn2LwzocMpE7jU7zyC38Ekif47mFPNkvYN0\nvelKQrITtZdYnOvMlrIF0qsMpdcA8V4ImYgVWvxNG5oVatUjJD35RhptatoR\nuavXpOZNqrnkpSePDMbyMYJNHmEL2kzj6hkbP80B3HXnj+zhwKQFelu90PpK\nxnW1EJlgyKhae+Tr8VwXf7yX15HbOSnvlYUktB5hHBaoVow7cLvmAZOjQ1bH\nQYcVoaPTGCnDmb5ai7bmUZz6mDuGMUHNK1riRgbE/x5vtDFNViJquMSEh+VV\nrulI\r\n=PlxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+ytQXYP4LtvMytYX2R1lTTLta4lwdneCn3uElA7Xx2AIhANKqt8UVsh7TP/4GXjiUmq2AcUZwR6fr604pD5+BHXeh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.70b3a072.0_1618439158374_0.3489166686674239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.ff79b092.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/ripple":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VmI33hLpsVFHEL5xaI+uGY8CcGSUYzWxQC3guA+ptmTWtiTrO+z4kuTs6OPCYyDP/5PAjkLD8qnOKTGYQ5NcDg==","shasum":"32c03ef9bbb4b3c772ac8308f1be1eb970d6a944","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.ff79b092.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0UCRA9TVsSAnZWagAApX4P/jInU8RBZE10yvvezLyG\nPbC2gAE03pt4cCJdpUvVdRpqYgj1xIlu3EsfZ3zKyt6WYiRINXseZc0RQJDG\nDHbR9js5DN7feb3TxvEbJoNdBdhUznLDgWuNvtok1lLl8/DKfBZsMs+ls96t\n43tn8KcWXQA2b74gJv8DDbYTkNRdDSCY5dpyCpysYlRA1S4Tn3FC30K+PRQe\nyShrFM/jyRhSODC5qhjRfToO2xH0KJaT4NHGnB47cqUhKcxrY32VmMXDqOwx\nouHNXLojxt/vVaQyhw4ZbwhaRRhr6n6HheLUhTxAKEqSjmtI8cyor+dNA4Dk\nb24Dep+N7AB1ZI1vzOYfcWIJY7tpUkH0WCvQs7HEctKIq9PtGUg4F2OlT0k8\nGAgzipfTvlN4m2wcorC5FlavCdU1zHvUfGuBIWvRVGgTpCXlsOC18Zv4VSTz\nCcecK7PJEbYlZlXOW3ZBb2mTBRBb7WA0ZI+hVZ3bjnqlTjV6gU5kSt4pURNy\nLmanQbA1MbOznbmQtIN51ozqGp2TTstF8NYULITMSzmnwuOq4f07tJN09F81\nf7icQt0U5jcG0Xcrtp5kvR2l1n/ciRC2bAIh8Q3HXoFiK3SYsEIYBreuhd+p\n/UeQJ4I9mmen1dwuR5oC2ppQPFbfndjoUV3t19fJDLWZsIfTcwgDKJAjFJgG\nrWqo\r\n=zgh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7QDmt3p4kqXhOhM5oIAr2fd5rYQKPcvoVbKNqDAdp8AiEA54NRoAKF3p5vNFD0zmdWWuTJocolyyVACoZpp/fztBk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.ff79b092.0_1618513171473_0.5934905175076974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/ripple":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LlG1on2YapL0dcz7E9ysh5585iLS9K5lZTVF3OS6cuOdD+zC9ee/WBGeVj+qgL56Folz/fY0it5hL2sXvfIjng==","shasum":"b1758c6190166d48d2b19d35c61eeec4d2bb7d6c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.f35b2fd7.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+KCRA9TVsSAnZWagAAGQQP/RHAHmRacIBNkvy25R/k\ngg4h+69UwhcViQ7t+AS+ayVpIsu7EW4FBKgZ/M/Fh2O1zJsy4rAD8fPKvyXT\noKIPWQDQfy3QrhX1l8G/n2Fq9t2dlpQw6bmzJSS6vXuAMPtZiihKO6/UUay8\nG7Lhx9ItZrRfVwOlDkU/W1PHJJ2bHfqS/ZU70GxoBvJgMJo+4ljjbMfBRkS0\nHhcF+T7q4Wj+Jfk1yofwFOQA4zk4Lw6DctbNJ8LgURAdpsztpWdA/q+jjGoq\nzKe0Za0kTVs3A5ufFYnni5ws0WPNrVF9uZrvzWuDe1k41zjoaezlR+akIn5A\nEMGe0oDK9oQaKA6Lk32FvxxzK27i/ozo66DjmQ+TJ2I2Eu4qqUY78smFTJV2\nn6hO4TF9WmDtsAieXqEOWjFDFBNDAnMr21XqOt04Dexz8i1HBJ983qNrxR2P\nM/LpAyAkSM+I/F9lN8fpoPABLPztyHewMCI2YmPW4IfKR2a7+NZMkNkxV+I6\nJ8bwxUv+2sxCIzsvt5grSMhV4i6OtzwI9AJbmmUAmA8ZG40pP+6TYnoxJGhn\nDllRG7tv2YkDS5C+KZB3De6f7REpzAYhGg0/GH12oBGOmyLbIUxtd2Sy4gxY\n3YN1KE9Fup2TChJlqf5CheSeD8Xv0txmGYwWCXh1LC1nQf3tOWbHtCfhR+vC\nMkHt\r\n=p9FQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7S33j24rwlMJ1+vw+E6OUFuHZAgFLRgeCHJbLBa8FfAiEAy4yQauwG/rVNiOkqcMsnL0oWoU60r/QtO5gxqqwS8bw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.f35b2fd7.0_1618513801547_0.13675492304543413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.11977cac.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/ripple":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2vlR5Bkg/FIrw24w5RuSv9Yj+l2FtHIxfitCAFSEackhTEEzAfEc/F4UaDrFNGYxmba2DqOl3JKpoyW3QYYFxA==","shasum":"f45ddadff37bc48cad44eb9f4229177f1633eab9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.11977cac.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEKCRA9TVsSAnZWagAARlAQAKMEBClIETsGCKmQynA+\nQ+7lMPkPfvW0Rh13xowerhQwJLsh/ZREj2FoOpbL8TTk2+91XMLpE/aI/per\nzK/yUbZGIbUZLlTk1h3WlVTOzyjSm9kSviydFnlTe4A+2muUtZxa4AaVrwDE\nYNABSJI2J8lSHRKMPXjMzbuc3kbUj/I49YAncpbIAXcmaRr6NocNDHPNHGSp\nqmkMaxxMsvUnG0aLa+ZW41W52BYAECDE+C8gZQymGRew6Hh6Tn53fHyHTR2S\nMHigTqLuyK19tJ7r86d2Cz6detU34EnAtASSqioQ7ufGZ4TeINfT6P6gYIMS\nr/fDHgV3RxVCrU5ikea/JS7l61/KrUIBiqTFYXdngKztYBsZUfQTcXB8kcmG\n3Fsft5cTdHllsthFa2+cj3gP3ofv26tahVnBV4k1bMzXuGcNSMeoJRCVmFWd\nd5vnYAsDZOoBgwAJadXV2vC3x2mgluw/i9PLPOJWA9dFNCsgiUyH26F/5qcC\nZxntXY3+AkI1ivYGYeJW8KKWCxDDfH9YAIZqCREdvfFcGUdYj5bozgmFBTxx\n3QO2S6L9sv9zoGcegEENL6dYtCG5E85uWAXi73MAbTGDFe7rdX70WmEVg6WO\nr2aDWQZvNG90uBuyVKmZUze0gt2GqnpnbuCy0GKpBuPisMgXR02+EEgTdlyB\n6Jws\r\n=1v03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaeymQ+wpFIr2myAxdqt+r1l8wMXUP3Obw482pnfhZfQIgG8XkfY5vySUelHDM05aFWMdx7woH87jaaKAHvsSfKg0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.11977cac.0_1618534665615_0.473012429515425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.018ff45e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/ripple":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MDLr+UVuW/0iDB6lVotAbjT7bumz8qJ7hdfZ41Cs8yBPSxWZlwxiaOx8Ca583BuJ4d5mErXP8I5IxOKTIQJC8A==","shasum":"c64ccf14017eba5785c0ff00a5acf6a99dd616ff","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.018ff45e.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3BCRA9TVsSAnZWagAARY4P/AhgrHhyttc1amPYPtPI\nANnFM0zURBnBg5b+PcCxZuu5Us8ZUZnCShS2uIsCwxqmSREicVTAMDLfMbKa\n1FuFlmDelt8ww0ZGfg5F3mJTpctpPjXTFG85J9Ny6DXzgnHZTVoZVrhUcVc1\n5Auh1v6jRVZ+EwsINj8lqNNdbAvvP9sMhz6jVhO3PJ/fPn7g6A5pB3WKdsxl\nlF5j9siS0vmQTbO/aiCh0EODRy+ZCIvLK2A4CoXwhhJkA4eRsuLUBJ/EngMb\nIe1xAUCLlUz7xvZ8uCyPwGNEO4jkUD+lWme2X1aNCuXNL98neV4pXuQUyePe\nlcyDun2G9kEJwuCFQNlXBTwyQ3vpJNJ0HZJVlDB+s/4JArhf+pj4OEPrT5NZ\nNnn27SkHP6zEkR84o7pcWYlkpUMh91kBICzi7RBBER/VIfDNhMgnvVdSspV9\n+OFane4i1K+A4FqgTo0c3bjJXjD2W7WMmcYhO/JaqsKoETPAbd2OmI1T8vox\nemP/ZRyy7LmI8z4NbVyeyNKiO26WDac0mjBo9FnaHeF4cawzx+wnOFg4g57C\nChx+dE0na0ed2s6E4x4OfVScESxLkKzHXRa3TdAfyff5yNMJ4xuQGiwJypWm\n8OsAlRgqYhwRB+mr+Q64Y/SGs8T/ju1G1edjJT7ZwFRU8hKLrtspMFgDtC3W\nIeSx\r\n=LUpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCawj7D5kodZIWLw0VdvFJ4zchDputXAfHZECpxDocQZgIhAJiznATyzkR0t9LMPGGgCytQ6fSsiVeuNKItVSWqEnVf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.018ff45e.0_1619131840705_0.5121539059199156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mfDxyYkikAfYb38eIrjwuevG2YPwRXpioXZQ9iuC8ZXO/aSAZ+zLn1DqyDmf66lKcaJ+pzsUhmHjLha1DVae8A==","shasum":"247236ae17b2b8810130e8f8961f635476987e52","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.c99d1fa5.0.tgz","fileCount":19,"unpackedSize":76491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiJCRA9TVsSAnZWagAAJ/4P/i6xAGZUc0kPJ1Z9Ugs5\nLIdIM7kG4X4n9TOlEo2cKsPVf49q3/0gmaAxHZQP/IMaAkq0PzZVTxKUoCjS\nAYcoqIlZcbZUWa7rmm8qDKLWit5Kv7WHof1qC4pbVIwWv9I6JozK51eyV/LB\nWe9uDsSrRvqb5b1eNFWcWaNhSBa47/msMDEpJE0Bhfw0Eh5P4+9qEN7YaHnW\nXIsDh9mIJu4CLB0i6dUACyH2VbT/0wsDEXnA+W3UYygMdYyzs1YeklnK+z1z\nEkm2rS+hqUtK/GuKqsFEIBb2eDSu/15Ep4LTCfHW0NJIs2dmMXnBUYAut216\nRJ0vS8DMvn1pnjqO9arnctg4iRP13qJB9CccVKt6lmetm71Oa6EVezVT7I52\n4LPBm1VIdzN1RruHgFiMuDVtbsrHLj2cNWTl2xPNqGJaY0oPaiV2kRQIhyJJ\nEkVFKabt+NUoLgtoN6VI8NpmI88k+87pv0Cl6hw4OasA/RJm3YORMNamfq2U\nb00H+fEtgqYg3RUIqtfgjGGQnM0sXaKlOA7c2WoOqBfmUyfvqO8XllTarvTV\nwWGXuR2ubagAa/Yn101QEtLUbK+CpbAmHQYAJH8jYW5WAOrLOdc7tpco6rUa\nf1j7oYDf8y4I6MRmnJuivxNm8FFwluyMveuvDnupj9sj7D+bF3s4rIs4MzGV\njWtD\r\n=utmM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDBlTKrsPMJSoE3ycYpiahR9jg+IjTsodjcm7Wk3B+pAiEAo0UFy/DiixaGJc35cwCdUuLEQ5d4QF3BOnsjLgpCDDw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.c99d1fa5.0_1619466376496_0.5645761466805301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.eea9b304.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-onw9Xrg9rZ4ZN7nt90hFMYn5IWcUX1Q2U87ADIg5fugtB75m14yXXm2G7mtVgQIPHpOmurL9VohAuzm+oabB7Q==","shasum":"56bca712218dd5a96a283c161d799d1b0c1ba80a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.eea9b304.0.tgz","fileCount":19,"unpackedSize":76614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXCCRA9TVsSAnZWagAAfHoP/3xK2/K9Afb8G7KWI6MC\n3h+uk29eEx9C6jR+cRgwaB654d0Uj6baY1ZmG7jV5KV/kZKa5PSe5GnL/tVx\nxMb3291wjCluGYDO0i1IgrUxE78Lw5kZDR0M9aLVArwBXLhDuE6ioobLsHHJ\nZ8hgkvEVTFhgH28X9Jq3XmBqH2iOCtuIBY0Y3vH4oANdszXiibmY/6IILTQO\nbhi8ygSP9C+LhGX1xEzqVzVV6zN86XKM3BWEKCL4ix3Pm7CmfSM5zEJoRuKm\nQenrjFq5FxKtL6k8gHEpMkPF6X2pFj/+6Ioj3YLVR9I1KrxJZTpPqMdsBC4J\nJvF/9a4SPZFQojB5jh+6kkXgSiYP7VfwgXDSIZz+usCW35LTFjuCXry28Ou+\nBTneRu5lfA0nqhQWFkcdxypX53HmLkqm/1/7k4XxDHeB+w+9V0ikJso1P4nY\nHCA8hwe76lerfmXBHF49cG8U2kMNkm/5eA605ZEpW3Vah/eQv0TqbdhtWtC2\nZeCMtawJH9NcPIjz+WBfZulyO/H+MmtCvbgrk1ve0wxb3aBA5OQf8kVA02jx\nesNEpwOEXNZx/1dWI9ZgBE+/7V6uNeE7/qy3AtL95hpgB2nNzN94+ENAGWag\n/GOTcsci2yVcyQ7ylnVxUUbvQn1WAd193wsNLtRM+qQ2yUfLQPa+t3FmGAIj\nFDFD\r\n=XTJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxNx6AsOGQi4rxtl5wl55tPWP/gxVmC5RpxPgyv8E67AiEAuNedXwfteX52FhFdpvSH1UVIpqxlNG7icq3Wy/tRqKI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.eea9b304.0_1619563969586_0.7532887770820562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P9NPf9mN8QzLX2gW3RK+oliXJX12zIcrb5PHnmfXk+g4ffVRqr91g7X2iE59Y0lfFudPKn2yXV6SQ9Yisyz0+w==","shasum":"41b64d9ba688b218a721d7033b4e8cc360154f0b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.5dd85d0c.0.tgz","fileCount":19,"unpackedSize":76614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKeiCRA9TVsSAnZWagAAuHYP/i3sSbqZWZ4KKWhJqzXU\nLm9klL2MrHi8YiU3FThz7VG9Em93I1WemIQVRWoR9gRAGz1LpX2fNsXxmWmB\nQfwqOiODQeVWZxrfQoaytZ9MyJpGzkKfuz35kdcTAXgErLbgCYNVBrozNoKf\nukUNqFhUij4+SIp1lZhHP0REtPkW4A2fQo8C4BMKpjBfYgHvo29sWSnlMfiL\nmS1wGXJq0hYpWizD7bbVwcfz3KOgnvT1y45Io/RGBkbDNjH/mW4a197EwAnB\nSBh7zr3AGzjfh6n1AeEe7FsJwlnlZ7EhJgNFPdtiJ81x0D8cuXY835nlwPSd\nOBZQ5T29Kc4H2fPyZ0x7Nd9tkgvV/MdHKdfnqJhdt/MSRQNtfG2WH8UoyYX6\noHD0ewggCj9eHFsMYuIe0EpmLxShwfqGBX0jJwZnMAb8MA9ijIUhc8HsULcJ\n5cR1txl/uy0XqitNX2zNAASvuFp5SXSj8NIOjvxhVfEIUs3u7al9JP6ykG65\nNhiUVfCb24OWJ8rxhDt3CeSpPUYvWjBE2sY9jGGjQyMjgDYB7VSZtpPxKULy\nHc46ipodtvjlwMM6pcMMRHuiYyJGqgsMQYc5mjxZ3lWCljZ3VF6XXjvTLi7O\nAEqPf2+XDsvo12/+RChlPhurcndQQtXr3+EbtiA6TeFp41e1iPnBPtgJVKxc\ne7Nw\r\n=8bdl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJI0rU8sXBrM09WTZrmChhbUvUBCT1dB49RMKbq5+ooAiEAwHIiU/HyQ1c2YlQ98udlcTG023cAPT27cko6UMGiBI8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.5dd85d0c.0_1619568545685_0.2251222212171129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.cc813cff.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LmhbKQBZ0Am4l+GKBk4HXIXnHrWy+/x/I3e+NdeYM2RGDNV0luWDMyS9y5Ku+bEn6vGB8MPQwSAMWwp7l/uDQg==","shasum":"be291c6868035e4353f585aa8a20332cec85e034","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.cc813cff.0.tgz","fileCount":19,"unpackedSize":76614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRECRA9TVsSAnZWagAAED4P/RwFjAZo+wTWNhoOYAt7\n7Kpe2g9lIrYL/Xrg8RQiYr0gkbadwCtFeYKJ9nqmL0217gm6hhGOp/HdomFU\nhTeWHVzBp43L2ac/ITPMULUPlFw3eAuCRF1pHvbQeg3F01gXxfBc46H96Zin\ngNmjMBielNDZQshOQUUxuzh/wV7E2vivC7z1vDpRoN+D/VhzOumtdaecLJQn\nTgsiPf0zp3+pYRCiXIciaHb7VoPr7MKRgLp7yDiD5XaAWLVHTFN7q7ujxgbA\nPO8vq8uERz3NEVLpMJ1/Jyh26qngvb3Ja0cYDj4BY2LJDfIxW5mqMALn2/Kg\nn4Jz+76UHm0ONfwMRbRLYK65iWMXmPSBsx628+25kxCYyHKAGeFxOJVT+JYX\n82iXEQeNc1QfbwxNw7TgT1Fi8s2GYHsd2I2q1FJKcabeLbWzEjkG8g/WwHYp\nOvUdenJ2FFhu8XWfGrQrW0gL0d09nhWIA0HnIPkIhvVEJK6/IdWB2Eu/qytI\nFRMBdoLcWKwX8S8NDnLFi3qN0JW1zL0voNxfpsNKU7CoGBiSv+M9mLJBnimO\nWmr82s+x7Bi6Fp3t7YJQkWOOTILU/+fN9kvxjvxvnfruok06I1+bE4jxjQH7\n0inSj8RITxytOjWWtd1gZ/daI/vwBycYdyJl29MLxhOvFUWvwJSxMzpmjvmJ\ny7Nq\r\n=2aI3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9TkJn/tmdBVxD+43JtiFMJ3AYGk41LMHpLUpf+xFCBAiBqqBqbdqAhAHxT+Z3dJCnjecHaIkVaGKJ3FxJf5qypNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.cc813cff.0_1619817539720_0.6350475410947694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-ripple","version":"0.21.0-canary.0875e898.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xNLUwEzc/55PUQ/qN0Pll4+cpksDOEQ1OJScw7IgN9d/FSo4tPpRLd8BQSYaYcSlNzn/2JEe6s2Itz7hoF7Fqw==","shasum":"cd2e92475833cd23f259cc47859e3ad109f07ed0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0-canary.0875e898.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYsCRA9TVsSAnZWagAAkpEP/jK6Wsz21uA36KWXhfAH\niv6RQp+W+O98dxIfmt7pYYG3R2yn4T+3+9b8ZUSsxRlctnzB/gRzFw8Wk9sU\nkBFDu4TscnOGY0NArbXragCBDVj4yMAoyfWKSIguTwmnKtRtlT88SK++lkhE\n3lOFzMBPlaKYHASdjzwVgB3lXw3Q12wO5AxAzFdHgIiKJ5Uevlk+a59VvMRK\nu+MIlHoQudTNx3G1EwCEmTCQIvxkliMA3qApHXuj/NOYh6QqBlyad6cLAI44\nm+e9k/Nfb6ZMZSQgRVZ7EXfKARgSuve9hFRXpDrF+zo2/LC5fxkdhfQNgJhK\nZmx9TkJT9Fs/QN2Hy0GRs4ayJ+NCdxC05mrOTbT7RTK2GW2sLXYZtAFRLZav\nGPuLEXUqjXk5HF2FemZVT5mNZXQuIzv60g2OV46/WYT0DbLYn48cyojhBJW/\ndwIW5//e6LsoXt9qMCOu7cuchDEebrOQ/4AijRcGBgntOLGWV2ADPNJC5659\n9FunArD1sRS86ob9+0OcjH5wUVGBl0O7bqPbVKXq8aUhiYIKaavJoeM7cSgq\nRhaUZefJxs8hev4o26Pf0kSW2xrEbjZSWz/k0W04n4dNKb25TROribp0HjBd\neW2SGgNGzHLb4TjlixqBHUuYBhgC7DJxPstDtXGXjp2ZOdS4BqwfiraiP44E\nsV7L\r\n=dCvp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChZG/3Li+QM30XQflmL0Ju9nHnmWb5o5Vqq7Ur0t2GyAIgX4shXn5JnJAwNzuNx5l1/tTKNxL3Bomf7CgaCgHmLKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.21.0-canary.0875e898.0_1619818027936_0.22190996384738715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-ripple","version":"0.21.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"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-ripple@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-4UnUmtEBGJ9qH+bqUz7ydwt3G0sjtqUDujz2d5EFn5Iv6ddo1btcbRCWMm80oKSE4tevfTUMW0+3hlaAqrx8fg==","shasum":"f58290cd9e40e2fcd1c54fce1d766df19fec73d5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.21.0.tgz","fileCount":19,"unpackedSize":77820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmLCRA9TVsSAnZWagAAiY0P/0nIcKxu7C1Mqp37eXBS\ngbwyfff9DZFuI/1mjW4XDg8W3HKFulzJEloUJsRl9l6Kh+0fkgS0tBbQy6lo\nRvqwyK6wwCP2ZKnWxdSam9tqOWDFY41xqrVJ+sBLAUV6AuHJOWbxhxdRUxQm\nZ8b0YzsadcNHyJ/o2lRrxSAR4H2A6bWScAA02OpfHd8HFntuhW0bJO548POw\nOYeEymy2Ct7PwpfUsERcX5iPklzoNwjuqSw22dM7wcJSWDpAOvgOlB03wRw5\n7QQ9KbHW3/uPzAK6lIW5YZ04fZX41e/zlh/cKtbXQu1K6GGnexUNgwivxFRC\nGVZV/Qz2ylj0zuNTCVDZCxFcaPdcj4tLcNArPP78ocC762Jry+IPUkZL3j+h\nMCqYKNKNY4lvnub2Aq7WgpAHbN4yN+/0Vpu9zDriPBanKRStpbH4haaD/3ZD\nvl6ADDSj07tE3GCAdhnCPeL9MwIuhPnfEPrSd3qwLrtGYRLLl3HMqm0kVsVP\n+hR+6oZKHXCKqDbRrmClYnwPNKZD2GYABc4rjTQ6Q2zMY00T+2IELm8UfCP4\nWDaGYXwTSWJfQgcWH5bYJ+7GsbIrxQUgMNGa4Fc7ZbX3nK0uBOQMrYnxS8m7\nvaWxr4CWnQXD2m5SGAI9EuoS6wNQ9pJZESyFEmezxS2Y6sXsrii4T/pkBusV\nmVv/\r\n=iMxX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk2gEDEVYZ7Ar/sicQQ1TsSliksFShUgwveqv7TWYNaAIhAK8/t6f7Xulq3J2dfZ0J64IYpaxQsl6R3rnYgRkvuWJ4"}]},"_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-ripple_0.21.0_1619827082633_0.154624409223999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zWyh6ULN3S2NzvPRkkbDcsuFPFljE5hELikdSyJn/rut2iw3w2pl2Hmkh+sWOfHu3UdA3XELeR15K/RyIowWiA==","shasum":"6921fbe131f9ed014519adf7616abdc420becc50","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJsqCRA9TVsSAnZWagAAklkP/2Q1UHTKmaNBbA/ybMTf\nU/GFfp/VJaoj1qbOgeOhzEqLXASL88Z4QAtExZ9+hQL7RxGNtbmpaOIWuhGb\nqKSqKSZyYuGNiI+r7JjO8gVSldMQCCnUOHsryhcKZMi6d+1zLBYdUgtNtdGl\ngotA/hep9y2HeCY5PWE9C0PIgHBHyp4gWh6qupcybiVjEn1m5mzXwYO9yQov\nTEjoWKvukWLC7+4YTyy0Lp0h6DABbMJVY6uRt3xeVDRcOm3ljbGz0iKTNacs\nX4Vy+ySxFCgQ6O3prA8jL7MXmuty31gXRbcmoBq5BXxXIhG5E2aMnadF6kif\nXmwtWLaB2mjyfyMxZ4ZFZ09C2wAA5F4cnDVLFoHHNxEmiOwO/mk5+nQ3FcZ4\nrwkM82O7fOmqxWKS5U0R2Rotw8fT9qDCsuwhf0xxTWi6BW7jTOlL5pD7r7fM\n1EQ6BwFucZytnBdiG2gBFepsbyO8wk8h63MyRzBx8/Z4CcW+Lw97MMIjPDY9\nR/2lXc9BiupnWd5Iyk9D7VP6OA24hdTT+i3JWEEhzshB/svtTGQbphDmvwbV\n/CE4vTae/AyIS4k7IrSJtPPzCvzoZRZj4n6G4NCMZOR5CUAB3aNpXtchSnck\nrh1CiaTCn88hQwkFFXVFuFlLSgHXqzOfFfwN2JCJQy/ZBOH/9IgNqeHmgwns\nzEo8\r\n=6PCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA8SBkjyQoZFcy8KpSVTLe/8nZJg0dHUReLJMvmBOZjQIhALYVxX5WtA/q+/uA36ZMKnIXfJ7MotsfcLwYhOBjK9Fg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.8f1e7e1b.0_1619827497781_0.279746489414914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.deb0e792.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xsEce1ofDZO6EU0l6DR9frSq6D9e3lYzMfAcEw03UVK/QVplzwTHA55ZLDYtswNVX7gZES9Yl1ZG6+z/8xDARw==","shasum":"7983733d1f04f32dbbd25d875bbbc519c2b4255b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.deb0e792.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxACRA9TVsSAnZWagAAJEMQAKSeqshiipU56qwhsdhd\nJQEHMqSBiHB7MgCs+zEGA3Bw7XOc4CAPUVuvBInwQsSN+/ITjCgfWNAsPdbQ\nDsxCrUtsf5ZOUBOauF0qIjjuVe9zo6K8hoWGLMTTvReUpMZADh1PfhsoaGyY\ncStq1aTVzYBfBLKoBX7YkD2Mx7ow5aehjvq7lEEf9WUCm90SFdsLQPqBHf5t\nLuRcZa4f07QE9egVaUul+tUYTkCJKQHENER+veAPB7NJFOFtzXf5qGuH8DRi\nzkkSPPRvEVrMQnkOxoJiK+xW1h46Kepci7AKFx0Bd7vyeT0qnV5snr63e5tm\n5vsD9MlBxIt1kQP5wTQH5SSiF5QGunIXFOeWLJKQ22uYx8slAiN9IRrZfv60\no2BACLe4i+2KxBqTLKgPnVUdlmNAB2IoCnGGnIck8k2N3cLyH7j2e2rUpMz/\nJIsJzGH/WB8jwIL+XKe44pl25VL6bM0JcLJQSRxFHfIdlN3dNHpLzwc41yon\n0H1XLSinsEaQ6+/9W1g986ioRYOQMzTn1xfctMTgDtoMnoy3TrUB1eqm59gK\nUGPci9DwiJGK9s9mBrIASJUwmJr5UKY1jgIdi9xGZ92Gufi5QTIALMICD1cs\nWjoVjMItj1a3Vp9pjNTpoM1z+/YV32GJt4iloBsdjs91ulfmhG5JkqBCk27Z\ns+Hp\r\n=yOEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFePFy0KY0xe1PxbVulewAsh6TKBVytYCOBJ2am3rBPWAiBN+WjR8Tk08ACNTog3HWCpeJQHru+8OnQOjmAAPgSJ6A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.deb0e792.0_1620077629644_0.6847506360458446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.a3ff615f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/ripple":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gb6jg7Ra2TUvongD+edtogKg1VILPE/HGiSe9SKS2eYx+bgYsd0EL4m03jg/jJxzO71G4DmOn96eotfDKACtVA==","shasum":"f6e123abca4a837fd532bc24a00b194d37e148b3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.a3ff615f.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHotCRA9TVsSAnZWagAAsPMP/jYVMqfHHPYyBWX65kxk\nEGf6Vt0BOORd+rWr089jrIm4tF2FI8CQg+N3aZAwlIvoY4Y9dbSwzyCedyL9\nKMdyQ1rC91mR3GG6ctLesb+qY53v0hdxaBJZhHXmMVoK/ELzrkAiyJAXmlBU\nMQoP4rcUtRSHOoMb0kf8e6OLnw6sXSwBNIvNUrM3CoumGCRegghWrDxn5QM/\npCChV/2XuRj+/JEa1utbc2PDxuaH2ZhOTSi/Dfc6pGa3KBa4R9OiQCOZjhz0\nUdrI8/PhbP5TpbkxzT+U/FqcFF+WS2N54JsnsVLrTqRFEHrYJ7X5p+ckg5gH\n6ZG6l/oL7qPhavWsdzAErTdiEqkb5Waiqt8fvII71h1Kgjkm/6GA4IZoAVyD\n31RRVuZdMtxoJTBLffI9G04c6YZnNrTSt52hHEYtUBTmjr36s+Iji8sKtaaJ\nf7UcGyzxpQ5y0MHeZMgNv7DqsxxkUylpECCp0aL29EoIKtKSRmSAyBU/eDIg\nJaSt6unVzdNaQjN5oBw4+gWvgE+ZokU7iIseNaxmH38FNFeE/nCFn37SUP2i\npK7XTSOoE42/2JOpo4sQZjwberTyQnIP8WZMFIVyN6la87kBJV9d213Xa+KM\nHzy97HL9sDm20C2Kii0wFc7qykZph8PDxeZYL59KGPsygoKqcLzTDOYD2fhh\nToVb\r\n=zRA4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDwTSXZBpyZczT6YSLacCJqcv0wgpSsT6iTUhWPxUMigIgdH2KIjprhBO+hEWCBwLEw6Mgvro5ZAfEPwWrctlQraw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.a3ff615f.0_1620081197074_0.6858422498031016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.948ccfb5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/ripple":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tb3dPql9dJH2dy5EzMjb3vR23lfwHxFjPoz8PT6nrpvUYrGP3jKVZamLOC5g6jg4t3LBWVMtgFX0j1QFD5uATQ==","shasum":"3326a310ee4a8abb2f5a7991941b839108020057","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.948ccfb5.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDqCRA9TVsSAnZWagAACQ0QAIERqgjmkk6UCKMWInXn\n0ejlg7mieruiQSqe0tDXZkuFYxQL6SfTaw4lBz+pDRyL8zU6N7tv13S/y/tV\nXfKKy+Wjlllyr4beSLphYpQR69h+0uq23vMZHN+UgmZEO86msL/NhhOXcgum\nYxkRLTr2IuHDfoSXPXJsWCmiU7q0dV/wRujbMD96o5sYHRGlhPzBqlS2X/X6\nN0ONfSYi65/fUvOiacNJyvoPdWLHYCI4jQjsuwl1z//oNu55b7+25aAeFSTy\nlSGSSHiSRgzJ5t5WpuvsojVPg2ndEFNyHsrElkKQGB35mzeQqXO03RNXCEE3\nMznhoWEkhU4iUzL50z2QaP4/OuXHPu6P+vRYMKPsZGD5iqcotcmdpWpdlAo/\n/8kMkVphaKe0WoBrQUGEPujY/T/KesALNYlHC09E8MjafzE0t4cCCyD97zr6\n5CtwDab9IKYo5vbpVgPySXsFwSkee69xn1w3T4GaCPEt/BBOKtVsZlD6yhh2\nKI6gKwRdKUCcf6wJG/XiA6aQQ31KxOwvZRMm/lijHgsGPwjZFAVr6C1zBbyE\nYNv2T9ngWUmHT8zRdHW8b6NnKiJVS5HsDIRZQFCsxiHX/QbZPauyQP+pRdE2\nf+PdPRoyk+i49gsBS4xZIOwIYyHPnXb9x2dUAI9Ykmfncyi4iHiSRsodk3HE\nM/Aq\r\n=Hmae\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl6k71ferwBbh+c2I7D4+WLr7QIO+pj9JL82Xhhlpe6AIhAPa+ohcUnza4TH51+tB2CGaF2rBDZCawuc0R54Xam0nj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.948ccfb5.0_1620087017641_0.4539913837880538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.9f8337d7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/ripple":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6SE1eB2ALShdJUf7u2kW7evNTmojYIU4kdWdqga4lkETaN+4yNIcRKhtkZ3YWGpwyxbwinghB3zxlMnvGTCdhA==","shasum":"90706f95fd0f29337642a2ecb7643c7bd7b8ca1e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.9f8337d7.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQzCRA9TVsSAnZWagAAZvgQAJ9g1+D/KBxGSazfXtVg\neIC6EOLUZW7Z9H91WIFNUVA/n5W+MnUasdH9iSScdkkvOGUXnVJXI0PIU+nO\n8HfQsx0mgKEB1qS370oZBvNUYjIymm7wsMJjrpxPbDiGXlG4oMdS7Mmc4u4g\nb7VUtDJJy82Nfeyc+AL5GVMIH2RC33rr6l3DHiafodcEomLQQ11vO6G+jeaP\nyKDYpyU0W1ntUeZ/E0vpxTLzSCOUDh+Wlu/k5066RQbMINHiMbou/QN2azrD\nJ8i7dVbqhWhEhzIa/32tO34a9GfHrh7JrlevszokU+KpfSYpG5wT26Q9gVu+\nCLiEBoHxM3CAF3YqGhLod/SAz9u+W4g17jw5RiLA1IS9klaDbXuJoX9yodBS\n+J6HD307aeO+AJPS8mD6r3vA2bsXozYSusFScJ8w5K1TD/CavGxVzJDR1FSW\nRXSlQLICecjqMVnV47yrd9zVDFEzhvS2ZRsmwUuJjC8mn5UCdhrGapHnzcSa\n1cgvnNL5DQI1vp+3b4z6SP9L+LUJ5cqMUnHlW4KGYktmw4WyhWZTMyi+Ghch\nRQX7FwF3rNVOIM4kaAIq/24s/WPMvcrnml4npIJMv85+y9/SL47HOOuulqnZ\nYfnpB065PejacuFvIlXYR+w0ssoB5GmGxRWPlc0wwtLL/uqteYBT4k6Ll6u2\nMbsX\r\n=Z15b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ5cnSm7Bz0Yz1jtbA9IB1IDwPAnBiLInxS9JpDnay/wIhAOO3aaG0JxYyvGO10prSVr4+AimPpI0XV//QuO1nqOJL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.9f8337d7.0_1620153395271_0.3244398734452332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.5813480a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/ripple":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AVpESyXRNtC452ddO/+lfCDcqRL31c0nFoKIsL14SHcn2Az5yLGAYVFErbVWSWoJAstHqF0pk3oQSwnd2H2alg==","shasum":"2210feedcd12b46d2e502cb772b3de8f004f5877","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.5813480a.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuL8CRA9TVsSAnZWagAABpYP/RAfLPBbG4A9ETP984wF\n7JBtyiEUbcZpVAhXn+T8Vl8aKMfh++BogzNbEWvCNtBWmzsWprrHD0Mwc98w\niadQy7RAlFw51wtdtEzd8a4I6UvqGz4vgz85HuwBYVVqYF4LSsq4SrkSmz15\nu6XezI/ofSc6jk6LG38azy3EOAjntRsrkqPCnJCEf5WXoH0Jk7mNA36CRd2h\nLbMJ1X27lDj8Xh3WEbZD2c5W6yuYVx+JqjVTKAFZkNmhFc1QQjhzdWACiyy2\nc5OyGasqDueV3zKaofIQYnSiYV+7XmEYABrvCslzFsoVyefKO+yzWRHluzwB\njUv/cKEhZfAy51Q01PZfsvpbqpWdSEzi2yTMJSZRyoXjRuIRBPqM5mj18faX\nODBas6NDCZ9AMVT+qrmYv8FY9Jbfy2sCrPigZ9wd6z0RJwaqJhGZjI43zpFO\n2KeK4DhIE3XmlwtUHnzp2EX7Z7BHYerWty2Rs2AoEfLjC5GX3XRpMG77PC2H\n606Tl8aKXqhdxYshbyNXETdn2M3o9a0T219pOPPM1KHaeHdU4qgZgUOKi2vy\nTh+PqkzZqxOlAma9Eq6i77H64JLlJV+zrpbZFct2th/aePBFDUd3gMn2MvkF\nI78VKXi9/kwGqTziEm0tECD6+6Y1yk8iK3NPWIS5H9P3AWK6KEs60IEl3qqV\nkzk4\r\n=C/mT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsaxLZtIiBkbXScWvTufeotfA1++21iY4CHBGtlXvmWAiEA9+2ERQuSTgaTLtGWyPyZatmxpDxudGlyiyXmrMXYkyo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.5813480a.0_1620239100060_0.15640346415962547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/ripple":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0ZjMvlp2eyDM8xaex+Sgsi1UbqTwT61peKEtgdbThqjQIgK8eH9OwVa5zLzUEulxaDHVi9GMGGmFRwzK+/XxNw==","shasum":"fd7f589d3dd8b96f0a92ead903dd5eda721d4794","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":19,"unpackedSize":77855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5XCRA9TVsSAnZWagAA6TIP/0vHAaLiKhXJVVPaW08y\nC4vnoU0TAl8yRSEGxkag8d5hsjqSQ8OdK4XkZc38wlswcEGfPH3OwDwOBSWR\nr5Hnv5e0GGZ5jgcmJqRm1q4j2UI4EngL84fs4SyqsYy9pViVOAb8hZKNa6JO\nSZ4j5/v94bSHuXHguyJYMT8I+/L/y4y85uL8nDOCXvm2uxHOyS4G1KZtLBsC\n7v/iDxxoYGMOYxO28EG2UC78yE3RFXujs0xjpDdaYO9BiVlkUYbuValNRrEg\nIOUZtkv3cCOStIMSjQFMErTuaIcyoc1P32EP74ELQOx5aqXP9UA58z/ysrDp\noxJDcpSaJTfMpj+q8cQRo3xJocQKGvXkfDrUt7jFy0bMCntzAaNLAbRXtSMb\nOi2LjEjERJEfeqRlQ2BXx8okt4CIMzakcrsm1yt44Qdox3Z6jMLi3KtyK+QK\n/s4ipRnlOwcR/KT/FfdxTRq/0QvupSQ1cnZlF9iM+aLfv4UCnClO6u6RRqYm\nSWDGyYMB7aUI55hCPit7FPaOfT5SM+Gyq0PvbbeILFalffby0iCrn1fVoI+Z\n58SgZT1IL5B0RR91YWAXvi3znAp7dPZkQw0HXjsOhJvFYML+G+eakE7M0hhe\nYqcJXN5xQlHj+k/ihNfzq+vwaipGhOU517l27o8dpE92mZgVBZVTb8sZkLPe\nTax3\r\n=M86P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqmpe/ObSvv/Yakcy8MU2brbQnzJv9z5D3ySCH2fhVEgIgfaZHK8naDWlA6GioUlbc+roAnlvFi4TK24RnhiVroAc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.ab7fc1bf.0_1620323926881_0.3530309422015616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.25693d60.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/ripple":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YgAawuBT4TDZwa2x2Eozdgg1zla+cNYvL/vT7TWyN0OhDpg92XkZJHZc07rcLBE8vbXt6pc7pbLf19uX3jpfaw==","shasum":"d1be60970b8e72f71fce3593c9ef66ce09ac4c9c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.25693d60.0.tgz","fileCount":19,"unpackedSize":77841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdYCRA9TVsSAnZWagAAzGUP/2gl7dG8rf0PjX4lrp/F\nNUDSM7SaN+N3n9bYlIUpn/sCXmgyQVxj4LtbQVu25hRIVGF0zuVKq6ukTLZQ\nfopOcKlQDYNeF9J4S0Z4lJ786Qi411YNitbkvc4hiUaGrQUTYjjq/i/Y4I8k\ndPHRvUn5STc0u80h6cgWRx+2nrXpHow8CKiek0hzjS6WqKHeQIGci7Q+vazZ\nht/eSPPK2eRDEN71LgtlJ4A5JXO+AIkXXOlIHKVFzadv3iNQ02VlyewvYzuG\nwmSzBXALP2DX6q66SdVEoDOURbEtKPpzzVDyyf/VcIdbdolGA6ZSCE+1PbTL\nqfbJsUdvoctJzJGRtGFi4/Ud83D9rsX0MBoVF17YC5757GVChgGeBjPfwBZG\nvgUy1/mJmVrdEhj3GIBeBERNEVPimWhqNMIQ5oUi5dGoFkKXZEiVGelJaof3\nrwstf98mEri8v2otw8OcRgq1vSQ61RlO/6+ylC57JDYTw57OTE/SYuObOHe7\nM9ztV6E8Iu294Ni/KRtZ8y+3FcS1n52IBWaQpcX4OgDH5t21Hl09Z7rnY/Q4\naUI4CZxr/MlGfX/gOit7Kyp1d4KD8F+cS9VVnKOSA0+Nb2qQPIAuwMBVqTIQ\nwQot7G7DfGVDtUxCFKP5fJUlc2eQUNJ1Xaa7AGma/K3ikeiPxtNA+I9kC83h\nye1T\r\n=z0/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNO/fHDDqNodt7CZwBJlnsxjOUGYatioPyn6g575bXbAIgaQGJheXfg2m1CQuzbWfT3PC7ksqnGaOlJmUSSJ0KBHE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.25693d60.0_1620424535696_0.3311645943687973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.c497962b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/ripple":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NpNlHcHypodXD6o5EiKQC6BKYIyYeI6t9FhPte+/WwYdrdXn7x2+7o4A5CZZy6vO3ExV1vvZnwKXY787uMzblg==","shasum":"2781132b72ca7c87577c228ab8428b3ad997df67","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.c497962b.0.tgz","fileCount":19,"unpackedSize":77841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbzzCRA9TVsSAnZWagAA4sIQAIrq2SuCviguyE/yWMGM\n2Hcdw+3Nnwcw501iNObZbT0lMgyKJGIoJtBENEa1HtANc1M1nzfIRM8ESXFs\nHVowb54LsjhObu5sQNVTTOX4KyPZOIHvZlfRsB4Zb6Vqs79an5EgM9YgT/jv\nbyRZHIV3TSjR/JD20Z7E/eIV9Ik4PlMLrbHjl/0qFTLRLl9miS9aPbMnr6q8\nHF006ICtkoe/bNIgI9t8PG/XLZQoOSntXcoJcDSvGjph4Tsv3JgCH58uo4TU\ni+gk7nEFXkbORN5eJItQPyzKfnO0iE79hJQTAJG/U7p8JTApmFm8JF2DbnWS\nzLU2mlTtpz/tHC2wkvVfwjJUwd7nFB+iyCIZQhNhpmmDgUj+DnZRaS5yO4Fd\nhI0MuGyW+mGPzu0lY5B80OdQIYBiDsbbFwec8AzGu+mXTxW3azECpXbPoUrs\nHgM+91IsIZAxTKJcEPVWYm5nXk2Jvoz5cR89Ee/A3O3Ypd3KHYH9a4CCkv03\n82GD8WLtmpAC0qlHFq9vO6/jw87DTCNb3TrOEqZYg5utv9X4toQ95anfGGRD\nfNuXH44bNFmgSYRETQ11mAiy+959wngbQyP+plMqR/jvuKzguluoU1gII84J\nloegerFFPF04UPXCP9goenZnV2xd0X325XEkgPtMuLR5B1PIcVkjLhu3OvqH\nwFPX\r\n=sQRm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4gdxJGAgdz4OFi6cjcqjt/aT7Z5XwabPSEo/+dta8WQIhAO1EvPGQLVhxOMksGyaKHHXktQlNfseOF5MsptIWK8uH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.c497962b.0_1620425970776_0.3658353534857268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.e300688e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/ripple":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xTIGsc45xNFIsr6Y5yXv1BvMuY5M5UUDSj2LeU7zvfe65qw48sgzEWs4d3i0C2LYFs/cprPaXz1NKz2riwzKBg==","shasum":"2f30de340708b275652ac71d7bc75c55430a61ae","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.e300688e.0.tgz","fileCount":19,"unpackedSize":77841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb3+CRA9TVsSAnZWagAA/lIP/0Vo8+U8ECYHJBdia0og\niJJVj3Lgv3vgN+PdB/xLQjrHGBwockgs04mnRe/oGvCzb+olzm728t9o8Zen\nFpFszZeNs84SQ3+kCrcSiPkLewj1p0yQq4pcudzjtv6XxwTVD1yRI/+Rocp/\nGP3QHDITJkA7ReUiQwjNVHruFotcFm+LOnXwO5/7YUZ3JONLStM+cPTVdIGO\nbhT4swoLZ2xonT9vw0+zMuYW5uXsOgatLKVp5j3yy07STBX1fsXAQbK+ebL3\nsf9M6leBdtk9L+PwAcLzIXwzaiAH7wU1rAbe7w2+Iw7+h26h8OK3bdgWZhIy\nCexakfziuclvZBhvxy1QJW+SzICJejwyMA50d5NWGTzJFe/4ilylzCj4Yz80\nahT8VFp3rkWz5k7WVZQXosSEp6+dbbtxji/CysNFo3t7dL4v6+Q2almRwA7x\nJEXbOAyoZ6Aq9QWhObpLnoyTvKlj76WIgzCU3KuLNK/5Y360KKezHVt0h+yG\naYiP0Ebo7AfN2+yNCPXQo9aNH4FkaORqLH8So95VyWIyJCypSsxX1pkF2Enz\ni976kFmQ/zG7RjuqIP8tJVMZ+lKkZyf8bjRFWiwQk6utT+j41NLdstAm46ai\nWOjc+j7SM4ZikmbD80Uuj2i4nZqzOcIQX5mKfuwO4Oohqr53Rr6TeqChCAJC\n2X1K\r\n=DGSc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNzOWnskSBWbD2k+0qyugJVCC7wcgKwuwVt/SEWn/C7AiAHQ9kawKOxRp8/4waSUC5NmbEZGALAPrf0in25dvweKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.e300688e.0_1620426238163_0.7244887921198822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.d70287f2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QdFRUAR6HVd1wT2dPW2SEONbTnVaZwTw5wIVTNmb7gUpxvKsbMyfGy3oU6OL2yAMF6oYU2kam/PyhmdwOv4RjQ==","shasum":"42332a1020391f9662129130474b7240e5c4fc62","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.d70287f2.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYlzCRA9TVsSAnZWagAAlqYP/3r7YL+FVywzLiRFgX03\nz/okSZDo5lRkdLjEpuc9kRRevy5NCDejZm6hbo4G6LpAxrzIr0Ak8seAxUhS\nk2MqDGn+BY9KcKXZHYaHkMzI+hAehOZx7BWl9VcTpn5MqWQuY4y7sCmbB8i9\niYoHRmxzu+qmPCiVSVtWhB0GGbP//c/fGkmle64SH9iLX2oL94Ol/vVl5bdy\nK42dLTYrriWREEaL0EzKpPpvtneHdqqPW4hLOwVlLR3mwmkgLpX5akr4iKQq\nlv6c1E2Cv5WAeaqkdswfDh/YWfgCC1Gpfz31xN4nIIkW+jwcLZ2Qc324ggyA\nWXmAPvbYbmQ4Q907f4ThxSKDL2brVRM5N/inkd71ThUJDCuCUw9VSOrtPsn9\nj3g3vErCXjemJjLjkvg7mo7nsujN5OpzAe4k1rn0Wr7Bk0AplrVswqoOm8mu\n4eOw580orX6bfUEIcGudJDZvYfEPxGjjEb7z62NxK65bH31/1Fw8V7YVvt6s\n61BdhnUn5kwUrQMeTJJ4EpFNQXas5+0ktx5JfkxORFgd44CKGL5BoLBJFhEj\nuZIauCmYiwkOomZwgKDQAd/CuoSdmha3LqO53jrSNHT1UmEUz+wOVLZ5I6r8\nqfpKWm6gajigN0TtX0j6tyXY0OySBRRW+po6BYTdm3czXMbkDc2I8c3+Gn9w\nGXQq\r\n=oMx2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVcslG95UCo6vYfjzm6qrUPEodlWUXL5eWMeGBD1lV+AiBkiCoCUoxCl7Oe6jC20GjrqWgKf9kvOJ20a4p+dskfHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.d70287f2.0_1620674930964_0.8956916722123449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.02e841b2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DtL7qq/QuiEGzDnulRAlRsikiYlRdDR/wtwaWaKZJa6ES+5d8Yu8VhMb7UNm9zgJVzwRjsCTvWOB2JeiUfJvGw==","shasum":"666afd68da2cdacd585228bae8daa3abae51078e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.02e841b2.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZi/CRA9TVsSAnZWagAAVnQP/0KOsn4qCRdkwSOSrD9e\nf1Gt/A0IkosA/hRzLE31ebDC31qrhtroYVTBNmWsB+VbPmCcGOwrGWnfHMue\nV15hesvbImc8U3xRXHYEHKEu42ziJ75CGtex6W1pF4MCJ93xA41P0O7BMaa3\nlICL901MkiuSj/SA/F9g/IhZpvG/pddPbJJ5BNi1FBQm4gNOeosUndMhCjyS\niDB3z2TqjyjsdS4vGkEKUEtalpnSJxVlgEXoxyhe9o6bZ2n2IX6bp3LX6htZ\nso67R7HM/T8uRG6i1Tpgz0R2HEQ4hVP/6pWAnLGwdcX0guXW1t46zNU8UPbY\nGI+rKzBcWSP5WmBa8ZZPwC6uoxx4hKe90EEZ4Gx3y1ny5UZcbJnO3MXUcT4N\nsLbAHGn3f3fp25mHvtD5ZGJ6CIZLZAVF7PEtcbayuqaI56q3oHHGbKkSbzu0\n6YdXW59FynPw2uBFhdSaxbTYlApRNJUTVyS2mB2140sewqvQdz9Jgoy1psbF\n+ARMdUVgQkrQMaANzGjvWjOTRugfq7HLMcc8unx/cbVTj5O2QRD7JTgzVF2a\nQQ31Kcsac/04KQ6sx3cIX6n8tKNuRQfVC8C17hysRQIgC/OAg0hf6bcIEwCy\nf5AWjHYtIJjt0yfYCd6KDdHV3O99Oh8+kdaIE4hKTJn5cuoG5joUeAW4fBWx\n/pC1\r\n=h66c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4UA9pLC3Hyf2tmQ9B5r2kT2B1w9bx0bSNJtkIhpm9FAiEAzgTJ5tOVxjsVcc3GsSRBDpjsKbK7Jgd8EkS9FYZFtPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.02e841b2.0_1620678847427_0.7693692203899034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.badda2f0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gd0ltlOmj4otli9DPv28QD0/ISMh84j6CFe2EgPic454XG8+TImcdCsFUsIg+rE+9ynni7GovxxPjjz+WWTyeA==","shasum":"dde1ac255937424544463ab024792f6c6ea6187c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.badda2f0.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEHCRA9TVsSAnZWagAABQkP/iRYim9bi7j3LyDAC5Tf\nQp5nZ8aCKtI494OfZASx+PULdiSGl0B1wrKya9RqZfNCjrfuk8sQQUZpfhZB\nzomOMVRjmxKcspNoBUEL+Ld8aNvrXhqugONZkNShhnZToddbHVL7SN0DBKQ9\nUxEZjgstGGYxH3jLRY4bU3PPqvluHseZUiJlPuTrjpEKrr45rijR7cJyFdXi\ntklhRSG8wBaE5qAQK87Cqkm1bqEKsihQF8zAFN0E1S6jeQbhsGaOHmqFy4sH\nyd8AFId2I0eKmo6Grli6R7IsYjtGdiiatOS3z4jylwsgd6OROQxwacuO76+i\n895rQXyrzr/5q9dL3jE8NJTi4kpMUWUanNNrw6YqYa/uAxsGxhOsPdzrxdDA\nLUtGfcnVDvmpLfBXuoZv+BZVFPswZYRXQd7HBqV3pNjdd9OjswKMRBatanmp\nn3cxAB7J3JHh8UAuqKJ3OG0cfdXazmg9M/PEJtttipy0TJpHt5utKy3hFfqO\nTYVejrTQGrRX2jXyZWmYyDfT30jIpdrEB+99J7BlclK1I8dlHc93r3IM4oPg\n302GJyzE4vXndZvcwJCjucI1lWJrAplAxaq/0RyqGby77Z7pgbLy/Wva/fPo\n1TAWeAoRRIG7SBWHihB/ruOLy6aAZsrWgjDNTVJrHo8S9ldbpiFnhJh2FnKD\n9ITS\r\n=lw6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWC3lEz4YcICgPRMTW4QAANbHLwzSQV3AZFCJMG5PmdAIhAOdx6rObmYgvf8fmfOl6dvD5ZPYoBokmJrYKNJnJi5rG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.badda2f0.0_1620693255318_0.874871727491306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.004aca62.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xFHS0anlNLhREZmFr/EE+CpwGasnPTCciuNwVRriJsEH7PfFTkKMZmGTMsjTczkpNklqgBFycDbXSZCJt+29aw==","shasum":"27def88a971d6977f5f03a96068dbd69a1f934ef","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.004aca62.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseFCRA9TVsSAnZWagAAqWoQAI3Z6Kzwbe+a7JhsopVx\nqy0HqZ22sRqKx+g/u8iY3skEv8OMlAVamOWdg6xAnsn9xpTodsTOJ4GIN5NR\nyqc8jB9LD5RjxGKL3gh4gsR03FMv+LwIBEOz873LhaiTdt3PN0jlidEizrxX\n5WyUsD4bO5WzPFB6pfcPBlwxYW20XKmCtt4oUVDF6xLAVh8gIECjwT3JEhxI\n/OYzo+fdFvYE9p3FRcd/bYJISRtVMxYiTAQCK9zb7Mor1Rguy+EjWiZtbbgM\nMLqoQqq1vbkdUhCxi48WFeQAEa0yLSEdyUb2XDTTiC4+VN2BY/CiEfK2Nsk9\nIwJY5LBDkZLthyFiHBCpgZ0VaPormYMbj2+LkVNBOheTGwvFLkZYRm4N5sQN\nK9qE9iwRtrxaYDcekwucbbnkLSnyl88j1p8kn2edy5YqM5d4pOH2RfgX21hP\nP4n5p3vROSoXC8BrPvtqZGGqgNLv87d6keUpPgl/ZQb/q2LZH85cFI7XYw4V\nVCj5BLboS0h1oYiXMGOgnlnrdwRVIxFhnkZVYAz1TNyult9JcOAfoiL3IPfZ\nB3zsLu1vtXE0FCTR5tvC5mfOxwcVgTjW4T/w7IH/5Se1JkO4bCaRLSpAX5pR\ng/hvOPJCAuT/D5v+o7+8SOqmMC8QwOGKBv/aQSOylG4ZyX0pVO5tpMjZUFba\nkkWf\r\n=iQ3U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzNStY2uADyEXHcyOWyYy+rPxQBSBow2y7ZrNNWWNwzQIgHd9uQio0HVpdG015A5AuMsZt4PuK41W6UClc1JkllPw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.004aca62.0_1620756357271_0.4059082910466929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.4af17446.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-thgKYwsnTgQkxpKnFbEe/u2WP2EBC6EYEU1EHwCFvl3ceVjo0C0SQVIwyTk+xJ/Fi9L0S7rOhdrNTzejOs/qLA==","shasum":"e9d336eefa2b42f0c0a2a99406baa2313ed20801","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.4af17446.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDWCRA9TVsSAnZWagAASNMP/2s0EZTv2NZoSGQpHWuC\nIh3ea38HA0h8n6aAJZfUC3l1DMbvYCdGtADy40rglFEB5zEJHs4Zi5h6Kkf+\ngFXUXBJrkopNlCUTQdxMI/5DhFz2Rx6C8jZC8q/4bI22WG+fkZLKMTLl+Qmo\nDQFXdJfSAcoNnd6iY88T1oEyxo+l7VPqFhkwVhKtUxePehcZvoyTwSEikz5p\nKTPiACBqVjiMog5lbNl4KX3V2WWibTO1tXzT7urA/sum6eebM3q8MdXfLG/B\nxZHfRIhcumfuXVIIRGINcU9zIfQhTioktZ61NDoGsCmEIH2Q7vVYS9Z7U43E\nO1YmfiTrVTqXYfdjkklMejGS37+MQm//d2jUVNNNQX2MTmdWWl8StCi5DE0f\nyT71NNkHDfK3bPXjFuGiitoLgWwXVH5GLfCFrrP70doz9fJ4cBVhRwNfAyaQ\nJho4GBQ6MqfebxS4l6iZVCPeI7qjwAH3I/dePnKN9+Qglji9U7em8pP2ARFf\nxgQe3aoPmfIO8h839YOtc+NZmjSkEGI/Vo3ukIYw7sM11rswdLWANouzXU7l\nf3PMCLigqn8nFjxM3A1E29zaMNMimlwrIsUKKtF+bR7tNaec8OpKPDG2lbtE\nFidhggbo6G+oM4d5Mw+vi72nilpg8VFbiG23gWi4OwRVGtq9KLpRQZsoqy7U\nlAie\r\n=W7U0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjNQVSFthe81S3wHzjmp4jElAp+4ON2LfQqM30Jj8MGAiBiLxVVH0RXTdMthqpwU3UBxq989cop0THO6x9fCTKWkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.4af17446.0_1620758742065_0.7418994660415523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b94d7187.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CVa3feiLQd6L/52PaZq6KEslFHJ4aFhjJvvGhZ0hpchpAzl47ubRCBgQoQhHu9cCZwOWwSJtgQnb5h7slOnMcQ==","shasum":"5641275582835d66ef0758e9b51b9fb9d8d94275","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b94d7187.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtIlCRA9TVsSAnZWagAAAhQQAJg9nF5MOiDsXOXjhMYC\ntjiWsKhvhKGrv1SN+ypSjvSASqR8oxzuxRS5hQGnUc2zwxW36z5FGbEZX0cJ\nd+wsIZzN0x5gp2HMA9jA4ASEs6g/HAbQkeQeeVY3gb5YdLb9ypouPpkiRJoM\nRoucPMcpmQjpvBLnpp+1sHLw6hFfx63Aq7CZKacgk6uvKJTTug62Npeezac8\nTl+wuytwI1hcvidsqeKWOUJyPdEDkzoWBi4U0lzF+mn+YL8l+USi/7HdVmcx\nQITlZZl86wjimOeC2fCs5PRcpiAMHB3oxKwqhHRnjF62JsqosT1SmkbU26QZ\n7KMgAkPeWPLdKhr04FNkluhSrrdzKxl5GrbV6Qt8JJgwge5TmYcJ2WJqX7lQ\n4T69tp9oF3HWeHgV/gLtOnFZImbXnt0ekW4W9K0MVZxUhNRf4p2fBwqrMjRT\n8dkelk97xmZnyBgBbfXeYOPgPoHuk8VezvFdlBf47sxhBZ1x8eOeQR/sygdP\n+aNEFbRP5M6taJvVke6hf1eJKuD3nYFR6iRX4/49UGR7QAopbO9EvTI3m4cC\nDTrzVo3Bctogw9GFZQ8KoRLghVrzv989qpzm89qeNV2KV6gllBqB8iOmz+nw\najQXi2lI4Gsk1PKnutBtFyh90id7Ki+la11Pgo+zCwOBGFiZxK+yIdbtOFSX\nYDzE\r\n=7Wcg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYw5a/R0JR+H9EbtXDOz4jA8jwgI5P1Mi4hdjseMQiCwIgbbDjliXspSk/2GNYQAdEvk7INRuckKJmz9qmn0pDMtc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b94d7187.0_1620759077175_0.03622049686018047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.4021b2f9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lb7C9R/D5opD1f+TuF9UdG8rEYuJ9Ek9EZ8ZXO4Ku6ZFXf8tNu9xz9k/rT7V1dPa8TXR+E0+OTb4daWes/mipw==","shasum":"d5a7c12253a0c9ad1628e6ca41db9981dd8304c3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.4021b2f9.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/pCRA9TVsSAnZWagAAUZsP/AriQnJV3gKvd6Ky+7w8\niylILzaqGOepezJTxCYPZZp83A4OIfGyPbjwslS9bOKyntnRAWv38t5t9Zi3\nDTtGS8GmSAqnCydsGMfVdF9ziSkQz0uTzhOMKD1xC6ht5XO21gjUqhilGQGG\nfP4qnU/Jznqx+VZ3E1ryeDPtfY9oMvEMsCRJE/lhR5j5s4Hyfa5gPoJd/pdE\nKkxTKH/mYXQPdeKSGfIpXUyg6p6sAHmb50dVrw+Qtq/spyDt2IZKz+t0a1in\nKlUGu0eyljfHcjO6Fi9nji3wZbChfp8BJKJABg4SLiW0M6UgSoUAZVfj0dWm\nJDhBD1oJbNhQflC29Fm7iMeAnehPYE+B3QnJ+lwY3xgPWSDL9k9+B63ZbbdR\nBW1UBxLTM3z+iA3ElbkG3obbA1aM2b7RhAOVfgaO7z/dFlG6+Ztm330dTUtb\nYpg0NvVRzP3Sw/U9/Iletx6I2fS9AhyDwOHGm8o4G+cnNz6/Xdj8HNSJv5eb\nD4SGOAw0Ies5EySEfMCqBrxrCoyFd5JJJQ59hnNaFGwG14x8/zXLC+XJbK5c\n3D2FjhgKP2OX12QsYG+elvZylaPKSEThvVm1AhfIsWoiuLR/dgmzPDjOw0yt\nMUafun6hHQEPBEI9wq91pyIeILrONk+LSNIMnYzKFF+IDpEcBpydVXTl/bZw\niK2D\r\n=4gJd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyM2sRaPeY9DrTRW9ohKIY89ngbGyDaZaURsXxfSC9mAiAQkCKh0C9uHAtb73K6LeHWodS8+BjdRRQCIMljbFONnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.4021b2f9.0_1620856808851_0.27011243724014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.6a5956a3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hj46nyoInSqi0E8D6eRJLP/JePKCUGVPKmXQwvdTKYaFzys8VSNgHPpEoSX2w+YJ/v7UOwFWoo/4SeSLdzqXVA==","shasum":"0d2221a4ca93e0c0604acb66b0a07f521087551c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.6a5956a3.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPeCRA9TVsSAnZWagAASzoQAKC2SRn7wob/bGyntZc0\ncPRiol3Wkdm/UUC1djup0+bqh4uTKNqAMNLuyPM/1rVknmqj7BkT3v5czTNH\nPk+xw8G3NqKQVWMu1iAGIcJe6mpfUZY1lwFWifQHjcJ9viMM8y1azY0Jqp6h\nDW3v1Pf4mLy7K/OMlSejk0gdF9WlvzlC/NNlCIWH+pboXMug8j/yleteMY1P\n0HZ7nA9OwwQ7uQ28W44ON0pSYoZGNwS3Kt9EhA38PTTftW5pC3BWXyRZUQX3\n8KWM36H+w1tconn4JxnQG8GUfBOkUDbUagN8PXayMUVF5IaY98lfmkK1m13M\nDdmDriZSGxmXDO8H17N/5Iw8xV2+ZMaWTl7POS8LRBormLoPgJ0i4CZ7hl+p\nFYFut7gGeGUD0ysslObdQqbKWXkIbTvTJZKfuNSUal5qKIJEUYIYXC6VwY8X\nFhqsRLH5anAOX2DzwWYCPUptZUCeWLReyNagug+7otGMGDjAllCLC3OOVyBX\n3jpA51nfvrrZzTs49l0EhAK8vbaMmh34ynxtSkRp/aUunvAL4kWLOK8DB8i0\nQZh0/aSHL+Lc0xcLdUjUkyZPahbkie71T4J/qT64SQDA1Ro538MAonJ7IkqO\n4WjwNw0yB7iqq1b8HLkvoJSQ7dfwi8h/6jlQtOC8l7AduT6KYd6YTLDFcmnZ\nJMU1\r\n=wbKM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGrlS9wm5SMzSgnRpvkSqpR3lR1qSx92Da+joODf8iJqAiB+SS1Cduv8RjMsYOqe8jhaDz1CAVGaMo1p9xa1K6Zm0A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.6a5956a3.0_1620857822219_0.8703855258602713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0SYKuPZY43xFFDFKgYwbUEm8ZLx0jbxIsx2vtLsefwCGD8agxsEBf5StLUMLDEPH2cf7x3DEqHRDhNak5VZIRw==","shasum":"9350e97fc2a24ab1a34332b24b1f242e2f6859e8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b6e8a74b.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6nCRA9TVsSAnZWagAAmQsP/22NTz3P1HoD0Y1xrTM5\nCeipewq+cbZpg7P2N4o+57j2WZ9p63dJBWBamNNNaCnlzrWcdtTEfXUBrg0G\nWlOVtAaY/V64uDdG8Zxjh3FZD6GkABmX9H0qyTMuGx15tMYGj6TvRk8dGnvt\ngjDhGnx7YcTYQ0fe6Guo73g5aT5L0fgbJdlfR8jXMq8veRkeDUI7wLPbwrgz\nQKPEhTzaSw0t8ckuak//Af9pA0+RU+MKbyFejSvbS5+ywBYqZOeD13EunOwL\nl8P4aX0wgcektfYR0AyCJbXxRdbBFdDNq+iaAm2Bi1jd84TPLk4D3mWKuA/c\np/N2E9Fz+r1O+LemZ0B1zigGH/sVGWdVulll51nzX2QafHz5eHVcXM3UShKA\nOufzFLJt9BopojcI1zhJcdYNTAPcyyZiCRbablVXjURpBiZHIsxNqz4Ldf9H\nKQDFy4B1bdPWgzINR9+GeQk8wqGjqwXsKLvPvy9/ULsNA+PG5OlN+S9RoqfN\nEhYgEjli7J19JIxkbZ7GM4p4Quij7SMb1X9Zxw7Zv0MWfoSuIszjUAhB+O5r\nINusUqGP1hHSAhhk2W9ZeeuxA4Oh9yvRpP3bUfNtqn80LwPO3zkv/PKc+uPG\nB0wGXDkgxDdWLiWLkfjMi90cfuC11XkfWDHqDSJHAwsOpX0rKgTRByh5+n44\n7fn1\r\n=PgA8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzapmRqmXH/T+zYOM9knzBu7KVEe3bE4ZfdKlxcMHbAgIhAI1MigL8bfnkIFvtYArT3Rp/Mx5LczZEdXltVeBn99qo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b6e8a74b.0_1620860582891_0.4884235089385538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.c94e1030.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5XuLEptOox/JkSsuq8Tbe6JwabqXP2SWnuk/Vk0PoeXV7r6pL/bJXiH2KIsNY2HqDFOqvyInTzA61mWp2mH81w==","shasum":"f91f187f047c178cf09adf582097aa68f0d4ebf7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.c94e1030.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAFCRA9TVsSAnZWagAAen0P/R0XZ0rnPRtbmHAvkbD+\ndx8GKgAaTEVlEbYkNK6iWAq/Rykk2WXEwjKa2rG74T/nrhXECNvqqyl7XUJ0\nR5qAQY+ORsPAUoD3PDnBYiNtWi/bEQZo0oyvdiuxXeR8R3NylWeQg41TjM0I\nGhaNpPT1mqInxNRiOngsXPzvkmk539nzQ/8JvaJ/jlyjHVQGrkXvN53sTpOx\noQ6+FUv9WsDb0MBsxuCHsRs2+q7ivcVkgOk2bQf5OlqzaozFN0KiUXe1ZPmF\nxZAWVSKaq/WyhjhxBJNRSybcy7sKP3V9JfHANHGM7tVnCWvuCol0t5SqI/hs\nBsG7y0TuspJz0nAjBi9BbQuoaF66P1ooqGaPL0KsJVPWu+r7O8s6zah5HMOC\nRoByTQnOKlIcf54CkvGddoEv9dqy6tuCY7zyBV7uDlYUWAF2tSYWw68TNBpW\nvwi3+DSTsJM2GXI+QwAyO4ORdtbnlNZSOAoU+wG5F3kIbCqY4Ivr+QGlLtDk\nAE4Dr4TtV575c7XaC4OhbdM3gM4N6fLt7urM5xVXjF7yvzVYuGqB+LzWTJCm\n4CN/SmsBdgxH1DxM43ED19aW5dcCyFzmEzDWl56y+W6VUyOHfTjAnnoZ2wHu\nEPGAIt4PY+VS1aM7gTgkr65fp8RPdubpLSZ15sDfR7Sg/QtXi2JX1nWrRIN6\nRfoL\r\n=haCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmMHDTeDRpoMjPB4iZGg9Uk9tt5fphIx6yPJ1nP7okWQIgb763wJfoQbriRlcs/wovLqNMOI9JDMXuN/VtBGgchus="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.c94e1030.0_1620860932972_0.42285863258842005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.40a34e35.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WRdaxge/dG8pwhbfGz+9C2fIHtwi/+YVdtK48yDCW/Repw4nl7dnEzHfDiX6SocqMDW6oBLYgM/dXo3JVXHrWg==","shasum":"ea23aecc328f68c82688decba05d521d737946d6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.40a34e35.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuJCRA9TVsSAnZWagAAJw4P/jKw/FzmgofvAQ5muk7Z\nmCdrfXiAbYvwgIhVrdRy+9Lx0TEYpuuo9SoBW8+fjGuCf5ESLhfr2j8799MF\nMfVHac2HzYyXYlfKRE7c6aVdOjGPOBroT0hFb9CNQ0pCv+vKrYSV0vuZDAh2\nlggpFzl6lC7SqfVNhbyW0Z+UJklCXVfeweHvhd6ebFgfczS12NTGwBtgzCWN\nMDg0TdI98v/wXh8mcTq/sKZUxUXoxH9UmG4q07lhCg2k6mF2ZkSLtREjbDrZ\nEElu6ayHRPj0DkezIrny/BJ+DVkzxPFe2QfvGU6mxaPap/CH1idUfJ4S1+9V\nHFYznhgI9DNjmuRqjqEAZ1Bp9d6N7KeRkwey+hm298BSv3f1N7+Lb/9aI8ff\nnKspd8en2R4Js6v8RcNqXGIh57yPkTW7TzVwz9hf+oFsHcvojpeashijqjKM\nWBcoxRVJgqSAVHzgaiXc6sF6jCAxD9CFefVikjZXeY013r6o+X8TxfMDGlMw\nQNmuYh9gBtcdjVvXdajQy2uadHRTbMTgdbKvNJc9LzxP7f/sTzSj2S+RScGS\nBhAdnCaOk8kesSeRXAVjsdzlfZvOA2aMOpv9700bEhgJah6tPPFL4cVX4SOL\nyHtWqd2p1WZ/2M4lXffyGUf4Mk7PnfBr5DpvmszArUEUQQOukVjNKsUYwgeL\n56sH\r\n=p6SK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRsIsbK5lgNgVHH8IUyW2OvirUyB9BM6zzXJRn2v1STQIhAO8mhWCsYK9U1x8lJef0gw3c2tW0dE9XgR5cL7H7emx4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.40a34e35.0_1620863880908_0.4123296408668322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.1be14d2c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H1si1upTC6OuNQKZUeDw7UQn4pghPKVwwFneVrZ03aQA8TfFPFd7w7G2aLxLACjjph+/Q1ztoRgc5vkSnFVugA==","shasum":"951fd5d92465ba563bbfa7a31ea5d440b73efa78","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.1be14d2c.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWaqCRA9TVsSAnZWagAAfPoP/0pRQj1Hd60QAhmo7vsb\nOl5uFEa1n5n63UEea5zOTjU4wza/CATqp3CIWiyzf5WY8zQmVLj9SpX5a10E\nhvn6d72hqaMqf9Biu9pRHJRy+NCjZZ5JrwAXAlycpKFN1UlUqfXRQ4FaaLw+\nhDGiGNDF/THye6xgfUEX7atj+2C6YNjXOdaUQDrKuTo8EoZ2K3tpWqFtpG7w\nLEJWtYW4emkS4NZCn/E7AJCPQAAyeccLNwxWtiFplsLZQbzL642HmsJxzzrS\nUBcqhIscVSRnh0P2sBxu1rcOTkS2PqrRiDAJuvGubLElrgMuh/wNhqYdpnVD\n1PnsRTgT3bpRmJQ81lbArI70WUeRU7qh/6fFYOK01O1bnIv+EzXqOje+OsIV\nHJ3tDxyDn01Qalb9k7vSiXlhacXT/Ouk4xt7T2yCOzEtfwYF6bkveBIT/EEp\nRcPT3mCXbo4L7+OP7FEmMSEIqWJ0k0VdP32mt/49nh8m6aT9MO6yRXqrv7gu\niDxXPa6TK2G/e91LkN0VglgJVgG8vvwSxtWyrPsRg4vXPtl4phYXjyB0PGY7\nSPQiYw6YeGy+O3YALu7n0eQZfZFqmNcyakrf2/uP5MNlChy4pS7+yfm9tcOo\nf+9Xf4USxs24gQvc/pxfSxHCaLDYMUIXdWrnSxyq9Wx09HyOP2CJ/1JC/ZZ1\n252c\r\n=2WPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICanlqzZWb1GH7J0YKLB9kQFUyOFoF6GqJ6d9SPtTyGwAiEA3BzH/6SlDXHIrmHGI2MftN4LploPeVqaqejCAQP+cfw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.1be14d2c.0_1620928170551_0.24389829796713425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.87dbd64f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dddDl7zTajm9R/mGyauFmnd70VstEuOpDDSzzmRGvAWHYJFxrzxDKd+bdf1W9z6feFzKlZ4HPOLNhB1yVgXULA==","shasum":"0df9aa87711f5e09210fc1201ee1865cd43a2afa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.87dbd64f.0.tgz","fileCount":19,"unpackedSize":77568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRgCRA9TVsSAnZWagAASR0P/Rcc5rAeFVsIIrWsfDOk\n39fI4QSs53oIEqZ05nErLF1SmPPYfT/BkhvZjbQk61Y2n/fXi/VB9IrjquVG\nKbWfbc+Z4vzeeBEdYQNtp/GQbx90Eq4CGQ7IpWtQaTp775p3JgvfO0VHf3MX\nBpLLCsIJAJWU+JUT3qzb0sV807lKhPnDFtG4oG0CvhJq/z/uQMlupPcNC1+C\n2XGZDzm5KxgDuvJ4hCwRI1QQFpaB3hipbbsBSQg8btCFb1yS/f87p+XLDdiR\nPIK7izuM9uDzxa7WDrs17dSVsDdnHAJQp/SSrBdxPMI3/4gUI5oI3R0xtEhk\n1JV47Z05vj2BnlrAtzew0KdiF9cW2DvmFMwHPPM2mxRkQlbh1Ou30hXEu/hD\nPheUvgA1WM/v8vQcA8EvkPLC1L5sO7O6jUhqFWkdZ7dHtSu5WkM08w+AJim9\nEiQIhWoSqB5E9rtaz3HMWdsah+UWtyW3nz2rqqb3BLKrhOPBSIqY/pRcp1PL\nEIqL3kChPGLhdrWEH2nqtQQd9xIUitvMJUoc9FKM1l1pdCyv0NSeMKBowiAt\nFMM9IKZnaGbMbxBZ0HkGD3zQRxPg6+J5JlpshapB4KU4zyLmUUA2ffSiMyfa\nwWB1QxbACRztYp1caOtLsPtdJe2ExamkSUm8zAjlnGoLi5dqzJxpRw7nMbVF\ndwGi\r\n=Rw7h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFe/U2k7ovsMtWm6TskmOeMoYkN7YPrjnzl3yv/L2xBgIhAM+w6xlVdFU4h196OhsjGl4P7gQZK7ZJMAYZPEVjwL8k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.87dbd64f.0_1621025887721_0.41540226001279557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.c452e4da.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mdQLswodqf4dMabjf/8cb6fmM2WjnhCVtptlUXR7UPXz3PLPHFHd/twiVvYed02eMPSq1eYPAgBny82gow1Z2g==","shasum":"67a3fd9e5eea7c2338f76d85b02e7e4b37f44e08","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.c452e4da.0.tgz","fileCount":22,"unpackedSize":99363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzeCRA9TVsSAnZWagAAyIQP/jgecNuZprCzmP6pJni/\n8JBiIUUyiq2B6EmsEsh03Ln+QDCkIaE2678oLLtw/PvLjBPBjJ6kU9GD5+vA\npt7pMsdFQvYXxraDOvvRN95yWfTmo1EjntkdgY7SQ5av+yWTuA2ctKSMrLHx\nd0EhI0VoDDJO/jLiEFdJTuMMFjE5E6eM2N8446jlqFoD8SBalvDevHGNOUDb\nkKQ6n0nE3nSJBV81+q59tQGRBZlAyAfp6/O0nPtg4veEsOEDPuzMpZ6E57rR\nBc7Eaaa9pmpnRWPJrEmAFLib+fxv2xyh86LnMLZmaNvvu+1TT7LVksqudeq8\niHgog2RpdHAH4H2/hsdj9OfjwEVfppaw/ibdnPv81UCt9BSDqAU9mV541wfZ\n69Kn3WMqIZV/ay4IZVXCOR6pTHsAFGMMfJx9K7SvZe6MIgr7hMIovypVHxIL\nFxIAOoEWDl3dY+SDgPDYrey5Zap0UY7YN4rRVcfpcAOh2BNcz7+Gzs/UZCmY\ny4z4klZSbCcG+hiNnIHJwo5pD/ideB6ChyePNHN7t6TsGKJ8hE9f0TtYu72i\neQwptB/qVKmNuVTT4au1ngqv5abt1qcm8ZutQKthbkziBCt41FAroWXqaRMI\naP1fxvBY2KK31um+SSpWv4v911O07DIN22a/iPB7IsArgAnfTvm+qdZoygAN\nKnLC\r\n=NOJi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJHRE4z1t4P/ey61/Y3uwLPWaNMrnus8EGmNEQocsJvAiBw3IUb5clcG6hIZHg6atP0W2fFPlD+2xLVz2gyIpaM5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.c452e4da.0_1621294301865_0.40479607924871286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.2212691a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5/a8kaJfLiM+Dh3RT5+vAbJ96pBqwTy9CPb1Bp7mb6XpXo4N7l24DS1BtKjTN0Shgf8idz/2C3ZqPWFZsGrc8A==","shasum":"26fad234efdbaffb4cfc3ddd599f47fc942272d3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.2212691a.0.tgz","fileCount":22,"unpackedSize":93774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowGyCRA9TVsSAnZWagAARNoP/3XPRn4S2whIB3jR8/i5\nt1GbqTFUosM+5Qgg5u/QNSW2jS0GDfNafTyCqK/IGz1h6clvOsWpbG0z5qPZ\nQ88XZFJ1P86sY0JdGaaokPEXHBsT0PONpE68iA2lMi1a+5/pT/pTqWoDPowM\nZB8yr4AIdR68bTVqCG8/NHPY0CpaG3iedK6XauwTEdZzWKVAWKEA1iOCMuDh\nPtzsuPkVxyNRkZsDLcJQD25jHzb2QTr5Dn1A17Z5NrjJmzF5nNrGU3/Ng/PT\nziIuordZKS5aAU35Gm4OzlIYUjHcOUFxqixjJjlYTdPLM/pdYtqX/D2WhVtn\nIuB/uNR6o78Ie2WMkicivrmxFM/q9u18RUGo8+m4IZ7EQI5vTH8vTDvpuQvt\nVTOoJMp8rBHAGxb3hMj2vKD+SVpHLd3dB3mh7sJz8YqTv7CsjC05TdxbMwu+\nCJ/KYSsw7OEEDN2nR20NYtwMkmoE3OMNzHdoam0sxCLp3WfufoVxL6jQNpm6\nxj2Z0cSoulxI41A5/Rh79XVpR3MKeCRAmAxBfZ4hjiJdLpqcyVGdMacuq0Wn\nVHslARO0494BIK25TqCB2MWbxDdmcYXSOuxD2Nd0ygGZvvPr+wvUoaI8xSKh\nweRR0pz7PJTJHp8brt8qDtieIhHiUxML+22mCYBGEjpixDRve6+PDyr+8XXF\nwiXQ\r\n=Bj4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5IorAhfYoEBRtUCy8/EstM8PgE3sS0qfmP8lfG/SKhAIgSZK6kfLzI317v5y86N/vEsxt3uaRwkLVkMZOnYd2kBc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.2212691a.0_1621295538263_0.831235568296427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.f748ff2f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Fh/vTM0HSuF+rJ97grA4Ry/jhyf9rcfNl+odRZ2FVubgCxxjoVQIcsF6dXCOeVt/xbnXG6lgftlLpLopHyWhEg==","shasum":"87dabeedf41d98815c2c21a366413be87996fac2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.f748ff2f.0.tgz","fileCount":22,"unpackedSize":93778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowisCRA9TVsSAnZWagAAQC8P/i8d5+HseggneRX6j0eO\nwbL/U+giE8UcQHdz8vRshhAT68v7Xtql1NuUjFbT/WBNxGE1Ixk0+ko+MaEm\napjfCpPaOevBN0EOI1Fh8T6iJdMm2lcxYMMgRyXVrCpMNGvjLF34SHDwZKK/\nbdzU5g7yQKml5Ef/Ug2h0JsGeamyZ4M5SVoGFq2+53hEaRKr4d2Ps7CZB/3Q\nNikVFiTkurB5Wto8aoBeHCfIW8PJtEM/1R0u6yigWTgOMeAVaNq3awNCn9R6\nQ1LehHvFkPPBisSjfVC8NCKqOEpHkOjNLOQaVxU1Zokl5qmhHDp8yBRjt3bR\nV75BflTlxxnr+UPLznq/PtePt1yqQ4VtLeyfEWDgaQRkLn4Z41sSS1ycpRPh\n2s0Su0CR2H5voS8wz63qDjOfNKh6Kbj292wXmaYFPVIfTEUh671ejq9oIuYW\njhPjeNM4J9Zjxq19FRuAXr0s7jBlUKgTvsaPP0zs5z4IVvugMlL8jfUEm9qQ\nNyWRBsht+di+HSIHl+KytlEmOfut2frERAjUNKJIoMYAMci/orOsAkX/zXle\nd8zcJZG5rh+i1w+PkXChsrEnqZIWFfytAGzGrmthSLXnbds0kXlsrt3PcxWb\nuknEQkKpcy7GGbJ0edyWxuQLOE3je7+8M3UWDgut0K54eejo2LhdZf3AzwcF\nIbxl\r\n=pjzH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTYFBTVhXhvWaA/tcTdVhcW2YMMLIlhwQ6OfY65mEvJAIgMILp1bDGRZt3X9lrgy2oTRMV31xAHgI+d5O731y2zp8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.f748ff2f.0_1621297323603_0.3766629654002349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.cc04657a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mjXSH7OA7iBe6e6ssenInTav9gTGx0lK0hrJfi92ku3YYoSgw8ULK8TiL/7YmGGH7UN67Emv4fdGPhwfiMfYbg==","shasum":"bd22e2babe11aeffe7a611eadf7d354597c18eae","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.cc04657a.0.tgz","fileCount":19,"unpackedSize":71057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZmCRA9TVsSAnZWagAA0OkP/2AO/yT279JpLnA3s2xg\nvIhfxOwKtTg/eJlPMIcsUuEv8ISQWMzGZ4X2mNRlAa6P51HrTH03HyA9dVZm\npTN27sItHVJJU0V7h1grEBH+Fu0uKO1VQ+CQ/qUOaXq1MRghD/bsVytsh7yC\nmkEJ0xFjdnRMZR/2L5I0/QwBs3sWehyWuFiGdzgTS+1hvCTtyjA9Gx6mzc6X\n0gunv9yQrSvYPjsyzfdGc4cENXT0GPNc4dUzo8dPE+YL8+/WfZplRzoAkMNs\n56aWX06O9IX7K//rNIkAhJz0KB90d6CMEJjQsnCcq1i9irnuXNWn1e9czND8\nE88n1Q+d3GOy+8hzNXIS0MQu9h4MlZUfj8BTmWwr3T2u76UNsQyaR4UaT9DL\nYdSR89lwsAR0hIcVtN4EKqwyw5OtO1WNWhqWkzwMZOb63ACQKL6Cqpjfq2aP\nwZJCyZhQYaj8JSp+1A6bPeXir/gCB/GF51r/lukC2kuFl9cppaXFFYrx8gdz\nqjAi5rzOCRmyDR6TSY2NYCkYAvyWZh2zMjoOWGQouT0Jq4yzM9Wv2dqgv/Bd\nSTh4Z4aiGlh949+rHJDb5HOzI9gn6nP0Dnq8klxp7w0qRS5mgjAlUKPj/tX3\nYRRsdTRCJdSNRLwleHUdTQE406v+ofMoVqMIdfZIFwgrp8CfF9qtu6wc2GK8\n61um\r\n=a+f5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc3123VJGTq7MzDfWWEvHLTL3K4CKWrR7UYrNiPLc1fwIhALR9TyUFwqmKqkHtE1EFmdCj92lJH1RMI5i5dpcYTEsw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.cc04657a.0_1621300837637_0.4233155413411154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.3a3114fa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WfR+ORaVYAsxd7Nj43GhlpIdoGVMts8qig1bE5y4Xvw8rArnboyuLy11XZQcXOrwIU7c1RIM+GXNafb5D6msQQ==","shasum":"cb3fa302329f06fdcb6d39eae177356dac9de2e7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.3a3114fa.0.tgz","fileCount":19,"unpackedSize":71057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHICRA9TVsSAnZWagAA2JUP+gKnELIuITUflTqve1li\nh8Mf4K/5jgMqVeyzQg4MWdENnxRAS6+qY9N/2JOgtWokLMBwS0Ny5y/C6XYQ\nWcSBWTxhV5jMIw14oFLdzaWLvmHg9a4xr0gdTUFZPKGrzrVc0AtlQUzWXU2i\nh3cM7yKKb57CYTyarrJxqGYB/xe3/juiAMUO3u0SGgpsjg7SMNiYKHC1xIiU\n43Rio4jj1HJjS+G3kP4L1UxWLdMxBrxfA+1FOUUYEetDUMhhzsxt3fnMSc09\nlf6jq6pVNhNRaKOD4eSdKsjkSS/deYP2ca0AY6zGUYgHdTRclfEq6N2YxDbt\nIZTts4o4c+z7wMoIFO70Zcefr/OvgjAhRB3/2ZWWrVUEDdfzmEnbZoNlwpst\nVsRV47IIqMv/saS5ol12B5TOqp7HAXAJhwNJtGdkzEng/er4hvP4leFgNA8v\nUCxLu7YyM4PfQGFC94r0vRVjWICPYflvLlszJrr6au2OsjSpEbQWlKvrW0iu\nPZhkt++AUY0bLh0rcX/CWrvluuKr9xF4fIBSKI0uNL2sRk3gGvpJfNrYvROP\nRXerK5H1QBWo3nNcv/wyuI2CBDXd530zGejw+/rB5AbQ6cfosqnxY8LRtDCh\nV0J60y7kWeuGKDI+dTcouHupPXJSqmikQEwuTZJVtgSuj9GHuXmoSRLcIVdP\n6fb3\r\n=IzZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTUM1hkh/XKv34jzIMc97tHHIdng7AyYdvSwIzi63I2QIgVoO4vV9t3asKzxYl/TmnJfhYdgDsCCjHXOR7zmEiWHk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.3a3114fa.0_1621467591935_0.048666801924631464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b46bdf83.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XduXYj7l4x8/1C14pH9R8SRanVKmiNxJE+fUTZrXGmydN0qW2PJIIoaR2bmsnsuX1u3bDGoC+BguWDfyScKSpQ==","shasum":"48d9f30e1e6bca3dfc2ba75ec78322dd7a2c4712","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b46bdf83.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBsCRA9TVsSAnZWagAAWEEP/jl7lXvs3VfpiB4jGLCz\n6BjyfNshC9uITcwptInsStl5bo8fa6XFM0JZomApgPBoI38mGpDj2v2leCVO\n/EI8ycz53GOsiZDK5GPfQLX/sZOaLkwMMT+6Qgy1faI7HSMMjq4xRPldDgo3\nF/DsHc0KKUI+QCMILFTdMgg5Lpoiovhkq7I1My2bDcpLkIsZULbJ0CQY7qlj\nIfAZ4BQ84QCBWkZVrdkbiucNGPXBNNIozY9aZ83/mghzsGs0E3+P5o/7dn16\n7hKVMtPYvMgh581mEHA6kya+JOvA2+58nq9L8E3ccuWTfoPv1Y9rHRmyrR4+\nCk4j1IsytVzaqq0jR7pw0LQjveimSCsObWQZuokS+nacVfs/wACGbVdL3+97\nZHX5cZrUaC2FuAAHpUWqx42CGiwBL0FoNe1E+NFKiMKozwZg2NSfJ0Qz9jdk\nPwoyQHUwBU3TPEqdVDZYxHpdTyJNeffOnsdP6fPd1pj0VIINCr9GdUL3r2Ru\n18kuD9bNK721nN4Gv8SdPpRMK+bjh6b2Ciua4ADVis/7LHLYzTMdOhW6YAaw\nhKOscssh/F7y5DRwYclKcLGN3qWscOytaW2zMxD15fU0aGJCd7UKswxtgDMf\nIY3T3pV6j3YJHr6tBWzHKY+rjZxPrdwpxrf0W4XVXpWIlnlt4btAHyJLTPJj\ne4i8\r\n=tKEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEsikIpGeGWoIc0aIgKN4jk6TuxF8HkTn0p62dEea4+AiEA4uLK36sY5VtT9bMnrC2gzXBMQt+3dVOeYwJjY2NXeVc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b46bdf83.0_1621475435635_0.19532172951463478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b401a081.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KOkkjPmZMHH+TBahWUQ4MKU3swLV7HtoBkbVI29U+6VasZrDZrI7ZRgvEXVgpK9/9fN2TIjrh6QzHv6p/xaIeg==","shasum":"fc6ef170002304748912850a930cd84021cbcc8f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b401a081.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEC9CRA9TVsSAnZWagAAIzAP/Rpp98wpGsM56CGy6RSC\nLQ3smAJrR2T45yqCfXulm3q7F7R9pnaL0vtDiEa3bAP2Y2ycExWTKV0HStZv\nEkpNBtlAS5UpQFd3uiLohwkPaxy2D6wCqLrfR5eXl8nmzWiH1NnqhUzuuFUV\nH/Ioi+R/JHxpwEDsNPeLxbP2eZKCgJeZK8xOe3NnuVq02ymixnsLPuacE94h\n3+xDBFanwIMUaoDbz6wq3WbgM1gXXp8Nx9XQtLZ6ig/7Bt3Bk3Dg1Yn3QuYN\nblnCuYgehynTJhyQlOqonCB3vuocAeTC5+JbbLQytAET28j1DKb0BNVSLgF4\nbhYFS9JWwJY1KH3rTM25eqCPhHUvPEZWJJGzVUU8MWU3z9mIPwIYM0Zhbgqp\nUrgPfoI4rNRTTzI7g1VTGeIuJHg0zQy4VzEHr9A1NOLHH+UmlvkfktLuqobv\neigkhJNh07jah+38/ziLavs9PeHM9hUCaWkHI5f8rfhlYRW8xNIQ3ke8N28X\nyb7v3C3ZSXQ0ygGMdL57VjaCvY57bN8+gcZje7XFgArcCPX4VmagkIZvZfYh\n83OWMwDA7AaN3Q3MqIBDyp47msUZJ39jdDIeV9yKBRBVnClKpuhEiDTN5Tdc\nxAd9LWaalWxZ/8pDScXdXy7iNg2YWH7VCT51wc6iQX5N8JP08mbOi3aBarDJ\nI41n\r\n=a7DJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtlkEG3ic4fx3+kkDENSr0xPFRqNa+VoVYxnP0FqoAeAiBTpPO1TTgxEV7xu+h88G1Ar4RhpwS0xdFOOxCElWZVaQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b401a081.0_1621639356386_0.4999452500034862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.012c8dc0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ud6/llVr/+Ynx+SbHKI7c0Gc+jgkANdyqpU19I7n3syJXYVrYmU6+LpUrMZXWsSMMkTY4FX3nsW4q2GVaOpzYg==","shasum":"1b38defea259fc2c99539fec8a7fe7df720f2e83","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.012c8dc0.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1HCRA9TVsSAnZWagAAgvMP/0Q5hJl0P1K1LsJKPR0k\npNOGU+uWG9bILUToqkurXoLvI8eCeTSvcxD25bmfOe8OSGHL0BPe40o8n8Nm\nNkbJM5FO5wWV7xSQzIoXcdU1qZrcRfNadT+6Io9IibNG3XMBTbHEJ9G15jWP\nO7ChDCLAJvZHovfBpOucNfFfUJkSKa7n0aJHEIFGeC2OLnFluXoFzsK2i8qL\njUGhE9cD9WSJKelsuBtHYlzlJ3PdnR+VHL/4fCtc6cEmRNppC8L9Ub8ftLsE\nka1S/4XAQKu2Ter/dYbnJmo7D5bRy8G0uYOFmWRN+LEcvKEPBmrhEqMnWasK\nKXnAjf/i5V2vCQR9bT4CnkK6u9gskvYV3QlA5JJqay//SIhsHlEYxCiCbwGl\nl1zBkKNPn/HeybuDmmxllzxPvkGSeYmsWJrR+pWgGTQfBEqfUOz6wrGShO/E\npLEv2GfuIH8tRshlO+7jup0g+T78e1S/40BJs+TJ7MiBYjd9mso3f0trNvtG\nm/fXxk80SRkJzxD89K6Ly328oT6RQCWBkOy+2J5rTfypAkzml8oubqc2afFR\n3jntSyL7yKgkQk3YNCMMKXMd56TC76vzWxSAb1wx+3ugeQX9MasNM/uWUMHD\n/8er3UK6iZisFtAtarWSQqMQIfY+mWKhaQsjv6saPqZfp+6VZDNNvfw2gecf\nmSg5\r\n=Vipt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhRLCTgQSeBN1ZiA6G9VEXVlXPmbhmEg2MhwPSngcf4AIgIs3wEwqjepWSCgTC6WbnhCS7QlQflFU9hmDuUF2899s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.012c8dc0.0_1621642567065_0.34531052664913564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.e01a1731.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EF/cjmocCLzI0NM4ytvx4QVF203fzgSFzUceLCDLEgEMVxrqurPScYGi706VAu02pAOeGU3Cjv2jNS8LLGVz3Q==","shasum":"da96d95aeb44b5ff5b8b942713f4ad996645e23f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.e01a1731.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84OCRA9TVsSAnZWagAAtAoP/0c82gXNE2zbIz0+t71A\nkFpJ6rQF2Sc65xNjb98gcrvE6l1RobHvVwL54vpj80LeH2zB6sZzgdYW4sPd\ngq79AIeV2rnlEel8438WtT50p8mNiFSq2mbyCEcC7WepXwG+CRbwGid881DL\nGO8+7K5VhVwwbl6DiJddE18sZb2TScBlzjMP4STjh7H4qGncwsB86W43sha2\n9iA9/DLac8PboecAZl/+d2EH3f+LiRWqGBxoh/WsZS9x6Qp8GtmJ6xFsjtFF\nwQsaHQ9XKW7Kh9h4G4VYQwmJmBsfyHTWTuBhhtIVBCgZRQCPZwJk2sgTxU0U\nKZc133rmqbeqPxjpHtYvmqZ5RRgR7zHm0zzJdCuzEyWKnWDwu5yTMLVa5/rp\nnyU8leFz31UNAeaEqsTzP8FQNYXZAQXfKVdfWaBbKSXXFPtLH7TOmzpZ2ZRm\ndbQnlPPTx+3H10NI2wXK/82aVhTxtF4nfr4D0hC3gvG/4tLCuAcl8Em/CP8p\nfX6UKqxdn/8FBz5cpJV1T2DY2QHwrIxYz05ts+So5Ng2PrP0CNqSimidP4Am\ndE5HJo1n2Yi72oIbUNIfMfL1EaNfPo8nYSQl/OrtlvVjv6qI/dCFG5KeWjq4\nUEd3Vsu2AJVpA89u+Bah1LvSFNjKYMMBNI9B9ioLEr0sWfF6Mr+dTLv7pOid\nReRu\r\n=8Fri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLEOdEjvgqismw6p1/QtlibvXOa06qljvUs5QmwzXP1AiAPJ6HLz1sM9OC8znGNvUIuf6iARlHRR8rK3w0mmB88lw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.e01a1731.0_1621872142036_0.12571142678505098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.59174b9f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4sRlormCU/aJYzxXklTYY+HcdC4DOwfNqnPby57pizolno/+LR8hQGcyETyiAWqS4usuYclVeZaiiRSt2sNPkQ==","shasum":"16ed9073e205bf390a4b1ff316a056f8db056073","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.59174b9f.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuPCRA9TVsSAnZWagAAtNsP/jwR44H/3ch87dKU+OLW\nAMa3TQtewgc6oXtO3Qx1Tnhf4OE2qeiAN4ILyQqNp+J6XI4y5EJtLdCFKQpN\ntzKjtjh90I8h5+Ad/oyha/hUitAgeAMNggLNlPq8JMHIFs2hZwSIODKkVPPM\nfrBj1zFb54sdfrBVz6fVMHlA3+/84NXspnYlzD3u0vGfKlm6rqSux5vmyeGL\naG23ybJIp3t7K24x1Y/D+dMZZdN0UdW7Y+NEyC3b3Ww7OmB4vGdgVktBO/ik\n0hLkQZJG+pXO1E4eIdtyWSWLqCoS3xPnqvQsflBMxzUuCou5ULbb45TKiuXE\nrC/+SvtdNAflVIe01qTovOUYeoUbHRMkG3Pu+eVi72HE80FUKzP8icbBvQtO\nOdUX1RLyj+VQJ+4S9TVO/W+BYEt8fh/LlrRYm/tFIeLk9zui8WE8/a0KfjkU\nNBSBQ6Hn7Dd+2p1eC2LhHnwgQ+gGMOPCrHc7ZKl5Q63QtCRWTosjVV1X8iiu\nkry1yHIS5FJYoGGE9GCyaGNwjsuxlpWuRPUBUcvCq2P2ZlV7fTK1EFOO3/QX\n3CdXGsaW8tVGFyS3CU1teWiLi6pPAypfuFMHz7Hgbfk7THAEtrWanX97DNN7\nkDvzj+sNfPBXARMYA0VRgOsx/NDyGWTJMxFH2nGWyInJE81Gd2N15LwNDUTP\nh0o8\r\n=L4M6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgkUE1vHw2Lkmq5JEzJ3rUyzPDl25rb/i6PiJg1fGTYAiBnsNQndi/WqMQEDZZQ3/KWfequJCEk0IQfn2fLmzz6gg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.59174b9f.0_1621965711043_0.2904030386498173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iqb/LDE6QNoFpcSnrYwTp3dWzIa7T+VtJdnF14bvr89X3uGzfuBQoVdVQwfA85BzeohIZy4Z545KkCvRvsv98w==","shasum":"c370a86b11c0e6e2347a707bf68d6321875a4204","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.c96cb2e0.0.tgz","fileCount":19,"unpackedSize":74441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwCCRA9TVsSAnZWagAA8B4P/iA3bsTOdczfj5JXzlB2\nIqMSZKK0UlhEWI420+7ea+ynrEbXvqovEUUTQPxq7w58xRYKDWtnCn6q2l4q\n8z7qwc7Cnq5FCycKN+tmsmDlFTwqoeVF/ZdHQCfLQVrtwSjJKbc4H4mTslAe\nqCO4ZYqYGTbE3pRtFX+o6I0AXCLDJRRNWjOKXytBVVPVMjUfJ3iVtFWMAxn7\nVemtM/ROt8kXQdo+yu75sOjEF4k763P5d4Y583TSflB+P/+dcKrBmfHgFqML\nEgdOc4yI7CBePplRdKAAVwGOWjcbL8Xvvqh1agwB6nAS1/kleAxssEboxql7\nXMitRcMGJq7WijK6ygXsr9HVm7eHmf/CUWw3W39S7Ea0vEHUgiU1DNxxdFsV\n9tt2vyDn4zy0lTQ7DLf2ug4wgVIGZ4gPhbHq0scj741OuMPHhUNK2gmFj1FF\nHGSOR8PwFuvLF3NCM2vVAXUUNBMFtfMyZms+fD5whSx0Xn2SYZTtFn8UiFqA\naoribzd0FMByMfU19tm6DozXjnxvH7qNvHxd+ztsA7Rx67re5lTAtNSKEAkm\nMvRuYv1rTY7EL3wD+q9IPtjmL9WEIjIYzHrbmC69t4Uq/LTTHPlauZr7X6cg\nmKW21es98FlW9YexQsrZBS8XB7iIRjCL+qy1n50AWEwd8mHAAtWSOJIJLugB\nR4Aa\r\n=6Ov7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWuhG3oClkjvNOHsOq3oubJCc9MC+4sY79obArNdlsSAiAh7JfiCjpMEOXCK6wAUbixhDU9NiazzBkyoARn7oFXnQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.c96cb2e0.0_1621969921607_0.15735114722135402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b9b0e330.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c7TukE6K9dS7hSnN1LaNY6cFXSjY39R9YduJSJlg5LQTU6RbHrW9so7kM5SfxK9yx6VwRNYAH+l2kGtjFLj9MA==","shasum":"1811ff83135e68ef00cda6133f4e0be17bf83f0b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b9b0e330.0.tgz","fileCount":19,"unpackedSize":74442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVUCRA9TVsSAnZWagAAMHYQAKM20gxayUsfHzfLrrPS\nGf3VNgPwCceZu6D2EPqx7fZiYblWTJvji8ovZA2yYLKgUOKFIX4uZGbzTXNY\nnNKolBTgCVlT8h94JMfI6p2nOjQ+4+pTHiCdaJczHpx0kzcZ6fAjp1bq11zI\nIdn9rBmH3UA0ANzKdlXoZGFOd3ac9HRvo4uOJ73ZdlCEyx7f25o49sbZLbYK\nycfpXK1PGnfMr1IVNWDhNAo2DrqgS92Mto+FxybEWPkCcrSivv2Z7EwDr0+B\ni+M4zgKvC5N7URGS93lSFaiSRGA2GgImsgl5I3WLsTVDc09PoHJ3/rW2nldf\nN0HVapQNSZEvaGRjvCipwg0NUn5iZRhUYW3HSnxD8GGh4KUd9o3eZZnDAp9X\nHHnaTxtoe93rzFIN8LdZ5aSt0VKJTWyLVe2U6QUgRP4TL/+FvAIZOVLsrary\nKF8B2FkLmieRwxDW/XiDWVgjB4niHH9CFRJsL9NLQh+kKpJPE/tsY62vbJIo\nk6+swbIIAsOw2K0t2L+4+0QFPUhZFwudAdP5sMNPrcew6G9OSUZQGJgGV/xQ\n0JMaYcWnfw39tS8AovWUBvWCDq3ZgNvJrcsurh0KKss0QGYDAlcMhBAQ+j8k\n2KvvjqHu+DiKB62WeeTVtrIukJgBNlNgf33pIbz2QW8tFeSTTTH3/6QMqmbS\ndwHR\r\n=2enK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcKndiuSUguP++UUCRL5KoLx+i6UqhFXOCOJRADSNZvAIhAP3WfuFVEDlqCYQqHCQHQPpDUtAq/24F+mXkgs3FSE3N"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b9b0e330.0_1621976403736_0.8999050134814885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.ea2a8063.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JAotaZ5gvagikFmF97PKXsHDSYtro7oxTYrli2dh18cdJhG21NbXFeJE1yrAHh8FV0qlF9fXOFCuhuek9iHsUw==","shasum":"d162804e0d77be19166c6e49319803646968360b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.ea2a8063.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaCCRA9TVsSAnZWagAAfSgP+wbwpnR+alWrTFzezBS5\nFOd5uMXtnQIQ7lF+bH8gzOS2vxVOJ3dgNNRCWOFSuaEKl8L3lgpLP3CWTjvq\nh+8S+JIyD8LvvRh5g5m98cN7shrJjJhqkbVuJjlEPhT62we6DlSDNv5KhUid\ndShtkDr4sP5bVrj4TSyXY+C+VBxj8Xt+5MA/6n6Di7MLnpcNEqBMbuw1CQIt\nmn0t2C35y6kXAKhwQSmIxpAtUe/m2KDNbnz52KnS3OfW9CTTPQr+Vto/JjI3\ntWzdvU4pVDm3vOd+1PexDti3Qgi1UxMLeqYrd6ApeALuu3pszCI7Jnwg7cRC\ny+Fon1HbwU0ZVqhBLc0QlyAPQRdWozZyWf+yhQlzeWsWtRwO1RPg5XI1DV0j\nCsDM7lvFAA55kDILRYiCfRq4r69hhV3zCHvWE7sisOMsQQgMX4ugsZlGh60E\ne6Sw4YKahWHSmjAPMuOKKmJbGjg0DQ0nS6UKFCFs0GKMcpt0n8C9EbKPPmyg\nsC+hkb83eZp735eya75mLJ1RZzJxSS5cEUFvywYCitf7w8bGQozZc0LYPIeC\neh2UwHlxgJjmxDeqszjhyCTI+a/0TIk0PpTwMibYccKdhNKzRtgoehUUx0Vl\nrhcz0JS7RZ1h3ZQP7ZnAj9rK9a/OAMZT3RmjXjXQL5xrsIQY9R2x35OWpyGc\niL4d\r\n=1OXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8+N6IqPPQLQjUHBwcTa/hNCA8PYnyCFulAmE0kuqd7gIgI82uGn7NaOwZM0iFSqoiTm6f0RWZRJfwqBDB8xcoOSo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.ea2a8063.0_1621976705714_0.3430572804473404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.60cd9178.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/ripple":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JdZotmrkH25DwLOMbKyXoTNYuyy52Og6MQDX7mT2/+VS/T4GmeS00lKCwkPE4gp5IO3X5GTi7CjAeoKrpxnGUA==","shasum":"864eab48ac4f0fba1f3cb8f2bf6e1992865d4011","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.60cd9178.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYSoCRA9TVsSAnZWagAAPw0P/iovfBRUOnJGqMmQD5Vl\nCvJKBKi5UZ1VFaLQhCAZm5K8nTYuwIFg/O+TwdjKBAgAkw2fRLLQuLKHFz60\nhrany4CH9EoJ5rwedCQkk+/v1tqcduB/srwfthaySOU4Mv8WwVbynwSOMWkq\ni70Rqx1Etvyi6+aaNQCnQm5ukODS9AuNE2LjeAqSONR1J0NFXHfeWQhWdybg\n0VijOr1FQFuEw412GUnlvuszwUNJwlxVcW2DnZT2Jd7FR7E+jeccIlpWA8U2\nqPc0C2UEEM86BEPz1ej/C4Y3hzjys9xOxyYS2+s3g147dqyaxQUqJuvXHzcJ\nH9/Ck10/D58y8Brk/fKVssCsA3MH8YLPiSUyd1z4qnd/NadOOgWJoFKVQ5id\nltWaj6WWqoDoOK2TWl6gmSNGtF6r2VBXH/fyI/d2VnAF8k8Wt3iHCuFWWo5F\nzP7sWtyO7smQ98oJWo3GxIV8O1QKSipyegTcR9kAUcRWdrSUFxx7yBredSlU\nqlv8/+hzbsGavggUPo+XIzL/v0ErXGH4gKx06FeAauqYMUxrKNiK4aVdYvln\npMw4+znbf4Xogk5rOWtOTyp8LZlKGGF4wCU/Awc+piXzz8TIp4w3FFRGVGZI\n5SJhhG+qvg0qsycHnoRIre3Ttg4BqWHXrgq6cLwEZeeTtCZa+YBoRMOFbdkB\ntgI8\r\n=joc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChD4U9+V0wZuxW/xslYHuIEyVCCaamTTXR6tOedX4UJAIhANP0pLOecKa9uGHiQQvz/Q+v1KZjDuCU5EKhJd3jiVlJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.60cd9178.0_1621984423575_0.18077208343058504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/ripple":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XQ/aHe3T6JOXzgxn1O2AXVP3I+s2wPH5P+OWxQHZDKC5M47DZprrrfvl6+1UqGeNMmLFqgx4rD8WGZ0pr0weXA==","shasum":"8f609a474897d49c85d0144507384546f0ada2e6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.2e2c75f2.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIACRA9TVsSAnZWagAAs2wP/1yVvuBQxTnYBljisw+0\n+74Orh5E1HfFpAbbIYCxtOugLjIqpSngnlkUA58YsRQk8GlKExW7nr54XAIT\n1tQeEe5ncoFJx5AlZHHg7wmnZG0t2NR1ijOtj7z2tec7d78oiVkP01aG4XlK\n2xe+FV459K43Rz9bbaHjqVcY8m2Amy5Nk/IUdm2zKUl+UHSJVFC9qxDqsJWg\nzDsUNeUbvjcfuAbz1nnH/geW5NywBub2TiJTLtSio0VL5mv7OnZELcIYDBXM\nofFHPBcW//GQJYn+RDXFUl9zzt+RLXnDpjkqIoHy+/8k3X30zSyw3OvIkYF0\nVESjjsoEzclhQ0EKOi5dIfWNyZH6ibkqj1nFIhAD17/xmxGbY2xewmUudcmp\nL96tjSgQ3iueb/cULEbIuAaA/FOY5z/G+zHiiqV0yUSAlp32nAyyf6MQEVW5\nwJ+/8LNSxy0iwy8seJS2ZChDSLbL9xWYCKvDPdUzN9UUkm1YyBHkDpyN2dq2\nXrjNDpUjOpoIL/Kpnd6uVqx/acPt1Ds3kuhc/utVIuAa9TIb1kbutAkWBXE3\nACogFfx3Pe4heWY1E666Zndk38L/MxORj4BRCwIpyMSw4iW5h1eXHSs1t/wA\nRAbLfF67+ZYAnCS97BHTxCU6ZN2EP8RuUJhX3hdVyv3P7FgOb6BcRQ/+eTIS\n+UBG\r\n=APRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFstyejVebagwEyJdyskRUOVTopu4V7v0xPgrDOCdgIwAiB0MSbroYSCH3WgkL7G2L65YKbU2lbK0q/j9Uwt+j78KA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.2e2c75f2.0_1621987840235_0.048101170199529086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b99c77d5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BaAatxhPemvyYEKckzWMRkh9VwnVAMat+JSfEv7hs+q/twZptxp11FboQME7fD/gVUpDyPFt21Mf4Xw+yL51zg==","shasum":"9466152ef3e1b8480fa83840cbab131b9fa4e27d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b99c77d5.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp28CRA9TVsSAnZWagAAafwP/RF99KUsEa3U8Z1UtxHL\nKJXBtiiKzXD6mTp+kxVolk45vezzyOAzDRIJpFuyIl8cP7BaBOs1IlETHd7M\ntaW04q0N8Sj7VzG0L7TyIvVIpVCLOglKq2vcs74HhCX/fl2ZDT1vwekOkGtJ\nzocBaRiyXXrqXd3FZFxYJpNT2sR0K/udkyt+imJN3cbCliwfh1Z78kvy4zTj\nHUC2GyiK6D6vFTgE64Z/kAzK7LLPmCft7599l22Rt6H4cYA/uu99vCzdrKhD\nmT4pwvPeM6Nj5ZhGpnpcKOjfrPi1DnxQ7M9ncsPQXRrmgs8pzPi07RbwtgXo\n/35f93PzU/XPpZMLqV6nHWSjys33moU4IHsJHDPqo4UQWvB7MvihqCM56W7D\n3U81mVbQCg9n1C0w7BVL6bj9JvJv0gl22SPPANioAk7cNK584zh3VpD24It2\nxtPzREt2dfJ8xlNK7Ar777W6wm+3DcK4gD8Rl1XDp7LN5kgxf1nTUgmfXW1r\n+JZ9/blgbFICgsCT/BEpMFXhfuX8sDfQkf6MaistvVR1sJ2A6rhfJ75sc2lW\nqGzPvS0B6xNfmu5VpsgVBelYy1aI2zm6q8wYEqYYkUGJ+SgQb+q+avZzYYQm\nMK25zyY7TuOqToZHi72t5Zh5syI6yZORFQmGGEY0spA4EJ/juOzcKnJiYg4X\nMJgi\r\n=0uYN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICn37opkSOTxj42wVKs/Fp8FSnLr6JcE5KAnr7SK/p8fAiAaQDYoReE9UDxQ08Wky84MuoGMvHCvSz7Y+K/lCLM4HA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b99c77d5.0_1622056380064_0.38153514841318015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.0de82c12.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XhWrXjkaSHbsoQbNz67mNlz6VXxmpO7aNIPdM5+gDP/5wBMp/Ugg/DvFOsHaEz9ZsQpn9rdxHocDwLt47zNkVQ==","shasum":"38593d2978c22d96b1b9cc5461ff42a110bf680f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.0de82c12.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4ICRA9TVsSAnZWagAAoD8P/A7DtcfoyYvsqvsREsGA\n1ZMPfuLPny3kB63MZRcjLfUajMTiIN/7ZaizXaFDlHRRGHogqHwmDfGr90YP\nTLwi/JXXFRwSZkKRzHDgniedwizCXXDVMalYF1VgnpINTpjXjn20egGMkqjX\nndS6f0uwCxG+3gm1Suc8QkFp4B6mdQr26cViW/DxFUKbJT1LSzYwyc8qFmE5\nGMXJTnEMpCxRmpCO0y1xu8w4cJqMZwWYhK6AXlRALJKD68YormhcsNUvTFYX\nY7CrypEuYnlrPCVHsgxCJvHpZ5uu3tCmt33CrMKPPFBHrRNM0dy5cQ9BEik3\nJrRq7YqUwYy63ZASrqw4jEJq6a5aLrx3137VpVdOWGt+RG4tpLSqAkihgyUf\nmC+RSBfMd/22IcrqAyUVcwi1xGdJfPpe6og/ABtq73Q7Vyxwmfa9XdFVJagY\ntNZPVlqxBKlDqMM60I1gYb1Q3f+JvcaoMcCZ9f8VmwAkxSNfv6wIj3c4WTFh\n2EwH8bVMnmTb8Qjc9B4r0n5C708NQmdFRbRNSpHxXGfzamIzBLtMt3JYzAlE\nyWA3B7pg04TyH2/g7fv1x84dB8ke6FM7+7/MYS1IcK/K3L5PizKceUSH9sN9\nuLmJarR+WNl05PZ8kOSFnsev3O+Tf7nHNnpVZ10vzCAa1XiXxtLEjmxeiYLu\nLO60\r\n=RB73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFzr8ehRemskWVKpWanUyiarDMzDJZyjyd6DCoNVrOiwIhAM+E637PDDA+BxZzAB6z55T4+F4ikGBeB+LjWmr2U2Un"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.0de82c12.0_1622064648047_0.20075016285831504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.227a4614.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3+KtSgDh2NGqGPsk3WT2FkmtGKhX6/rGYCeXXDWcCVWl5QGs44o4uP+GQXE15f4cgIvfR7LI4EPiYir81xhi3Q==","shasum":"48115da9e12e221d6650fc344f5fcb0872e75fd9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.227a4614.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KqCRA9TVsSAnZWagAAwmMP/3+T4T0XEZQyCw9A9cqD\n8WNzTpqhSBbcwZMnuncn15Zbgk23nlCKB826vqHuxEk4ExDYnKsyCGUt6XtW\n5D0Gly4LMAzDIhlIETzkwEqmYdjuMB2EUZxdwkLHAy5RFdaXyw94lSmQcn5b\nZZYKrzy+/h36/xmmH3zuz6SmxYJOzmpR1f/70m5ehsH5Rgc4h5QuaeK2i7Cz\nWIUyyCwdFXWTvUslF++1n9CAhAEjEsiSHv7sQSq6vjqTC8SbTZeb1LEZm0nb\nOasR25WXno7/p55hOXUzUdjaxLdN6GhCycCmABkI1oDfw1mo847oVwMgeeH+\nXiIckZfzeuByXNY7jkbBMGwb62y8WD98ccPLzCgCAoednRoksqkyGcVrdRop\n4AxpbQiMvuXpLdh5SVLP8vRA1zrAW5I8n48s5JAJoh8dx7fvpM/OzyI8Tttd\nqmrxbP8AZ/LD0WH7QM0o/TsVgK0QKJZHnlhjm+lHpioJoB+sJ/QWTn7+QBaO\nlHZHS1XflJ1hqQiw1XVbc9TjPHRL1Dq6/cUAhmDYMeRxbD9bLAw1oORWfNSp\na+gYbtEKa4NU0EcAYODo3w6PTeRciV3OMVsv65JWb/Gqm2lIY1FXUcL9tVQC\n2RVrwdkPM1Gqr5aPT2A84FIiCj5C62vvgZCUVQLc72d/Vjkt7wPcA5sdCqob\nIdPq\r\n=voev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK/w9ntiv4jNmOiHFZ2EaE8YQZZfUhqh/QacYN1ImGBQIhAJ14OB4wNTVqKjkoxiu+pqyk6H1GNM+iBl+hmVtTMuIB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.227a4614.0_1622131369694_0.07291447067749135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b3d21d31.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/ripple":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9+AAlrJ8SCBTaYeZfLhuD6nSVFe2h3Cbai2GeybsWrUhWq5nCghGR2QZYM9oXz2zpvZPeJaRnaUOor8VWwOxeQ==","shasum":"0517426abad7e058b79f89c9533bd6470e0b81f8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b3d21d31.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+ihCRA9TVsSAnZWagAA4AIP/RJf3JLuwE0DYSrV644f\nZ+ItULNDPQurPG7IyPkDsI+4aTScUidACmFh3aTXIG6pyh8Gjmjzc3+WFBVR\nsQF1RPg5d0LMawAUyGq+N8PUbSe2Cts+YCMpOii21oIFWxzN8OJ5wV3tlSph\nxkFF35sRuzYx6NZ1eFBNHYX6JiRl+3pzZzGMHxYECtLcpTKGQwv37mepS2pB\nHC9cku5JedVGmtUJ7To8YkPeFUZjz23CRmXYscg0aSrFXXd9gEA03smknb/S\n2KO1eOU0Ey+YzfjZvsP8jdq8x7AHGXGBCf/oWwZYa6waG/i9oNhrOE5c+oLt\npZNTguQRsRFBTzt/8+zI/AAWpPzaf2uB3ZlZVHLZ7oWEsKh5jv5vvKaziHBm\n3cZ9AMj25oew6mH+aLXhgNRguYIYc2v4YLhR/vd2GYSeE7ekf2f8xhPE4IpR\nEDafpHKtECkFeM2lI5JmCTY1JEwaMi6kRklDs3iARNT/vZ9jyPcYarn0O6ZW\njV2w0U1UGhZjAcR8DT3Hp4qrayazXwECHD8Z7607xYTpWg6zgSAO4P8E9oJV\n9XDlZX2QLsyrz4Zmg6wrbwoALZE/pQYTwpEMeb0AnsIrgYPM747xdCYaSa/p\nS7Kl2ndsZmBBnRhyRY3ZrAaQiFejHuXZKx87R9l9z6Eq3oDMBdZTjmiqzyyv\n98kT\r\n=zoMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyK//kSImkpfxn6A6W8zVTZmAg9yoim6XAovYQCW9QNgIhAPgR9cNb/PKnoO1YqUWXno7QD8ljkjZ5LMoJzwwTNSFT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b3d21d31.0_1622141089222_0.5122231581530634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.288c33ec.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/ripple":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S8HbUdO3mDlebqcx1Tw04uL5CEG7DpSHs1bwSvW8obTB2ERhPgG9GWu5zTyV+jRggIrQNd9MZtoQzTUadY4XvQ==","shasum":"ae5947191bc6c8552e315df67b01ce4723d3dbc2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.288c33ec.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zfCRA9TVsSAnZWagAA8qAP/2QSudgkcB/lYi4g1ygS\nIJaJS3aUw6XSLsLTQn5WPA9Hoz101H3x2/x+54Zv2zrEt8DMjuFPjgAYDe0n\nAlPRle9hwumfVCZe8p+NFBP1Wg1/mMg0Ai0nplLglffaa+QY94Tdp6QOlDEE\ndsVVJIf0hCohSIiX2qDBlWkJot27Saswi51kG6S8OUzQP+uUhF2x3YrdsUU6\nfrR9RLrX2tBy7SdGpE2p253siMLAhZUyOViva9doyb7/YBWcmRuFu7K/fFlJ\nroCZE6Vo3nllV/AP08Vez63CqrWeZWJiTDoBRtwPBZtagU0HF+mqCjGB+j4/\nColnbgNOxO0K8AHxbCZh55qe4ilYbg1J2LLU6jJ9xUGGgjT51DatPhqMh8sh\nfLv10qJ0HizkC97AEBP32KQOu7MkMBWFSKkF+kMnJRU2fvjReYVivAQhLZ3V\nPrLbSbpH76JKvjq+5AZVBVcpNCLXFTThPLtFG7w3ssBX2Z8XxVw2d8jEjAkA\nIcNjSB+k9ejmTpDAGGIZ5Jht70RyL/u5SDUGWpLYqIXkNHM6XRUm6LLNEJ99\n1k2HQWKtKH1tbD4x2ADIl7ZXdkRBOY5B90yh/1zDJ2IFihWti1gF+/yfDi2m\np8FXO2c3+ZG4aAJXp3KQl+/paa60tAQHW3MGSpvtySj058ECc0Wp3dJQZvch\nDdC6\r\n=0rcS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSSGNpL3XV9AWwSINowSc7mnsBU32gKt17bA+fg2dGZAiEA1HZ+aNY++NSoJPGMY7TSM3v7jEzUEPk93tP1rPxI3HM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.288c33ec.0_1622662367021_0.6888770491681799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/ripple":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0pIVwE3Qss6GaTFo5CRUxdLHPaSp9zKgijaqm72/GIHAKOkOXfzqI8CGkFkzwjoAg643mBejFFYcq5yMIuXamQ==","shasum":"a65f385b856c8290822931f9ff5bdd989b936b70","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOBCRA9TVsSAnZWagAAK3gP+QDtbsTK983WjyRgjm28\n8FGWeccPY8pBeyOpGedqBwvnVr7vFpM+Ehff/9mrdzPzLd948Q6pdfGSWr9D\n8nF2lmSE4SwBQWhCUM9SZGqoxRAtNXr2AUyjvgNAewxXju2L+CrbdAjhzCSn\nhcGksPQADazIm4G7BfZB39wlMRCpi/6UEOpvVEYSmLkspYR7sGJEk6W1YW1W\nMRnhFr+msJG9/I9zCi9Ku1s0yxBBxxV4owz+n3TinWxZFqxz9tM3LFoOvSR7\niMZ9E4HeubN8+cPXuPM98VZusf/mQoWHyn3MVQTHJuGzhd+msX6HfI6qdZVW\n33xy2KLDd/u21irveASTOUOCj2kz4ibY0rsgof8n38jxP4y3eHzKXffzx4eK\nqjBffJryI5MW3XRSC6nffy6zHDes9VxdGYEdEau+FO1epULYgZUYL+IhDC4a\nAMclOUlYx8N321AXqEx+tsNCAeDA0yW1JzL/FknW6Ohc7cq0fN92A9XdSd7g\nGh4RBDGE5IIm3lWX++gJ4bZKiSubznK2kpbpboJxhNWuvqMBYfqgk1J4iW/1\nbcqQcC9IkwR8mjYWusBnbxCjdYH0UQMroseIf24bko2MEBvwcuYm55QVJrqg\nPulZ29pYp/ihSfTGHwc1J7Sa44ft/NvQzcIDTFbDl12OPHZHp3BwEqZKGN99\nQ2gq\r\n=1+IG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICftofNtzDU1uvATp54mN5USOvI6q1l/g6rTjtYcCnx2AiEAo3iFqsNiH7nFeidwDDJAUxlqedn6uPkQ4659EWi7YeQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.7eb7ccb0.0_1622750081315_0.12587722741186425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.7fcc0726.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/ripple":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2laPgXFD2nlIWHeo7uF6+QNhFdRI1kSigwYBwQKcYu5T4MQGCcLfaTBfEGrNsfYFiRsW+jHSjNJ8z79PLtVfRQ==","shasum":"0d6ac239c8dbd014f433308459beeb40a4fb6fbc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.7fcc0726.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2VCRA9TVsSAnZWagAAXkYP/3rJA7VCySZ9Sv7twRTv\nFqCMkXCBADpww1nabMx5tb+QIigqRFIpLgN8DJbtddoPctby4vT4s2WvN5zu\nxmUI+TPx3eTwB9usuVxLFyQgyqdFg8KGHvLtwePmv63QiqCK4p07IZHLcFIh\nLS2i6aaWvIGKkTEQqV5OJ4YnUvoVbmnAs/BR/VKujA3HJj6oRByvpfVExKE0\na5DY6xeHHAxrN+rlpOoD8i8VwUKM5jfeZmpxaUF50fjst1cFXXIMSOG/BN/D\nTXIs/PlwRd4bwBQCIgi3uGuqX/aH1mxL+d9GZ+zJ5gaJRtcXkaUPorA2HsDk\nVCmrPXSEGF0v9KBmP79lFdPEvDIE7ncxgUZT0zAPOxuQ4bHgX9noIWaJyN6o\n/7RSiagjuipxK9GcF8Ynkhm26evDf/12/pa8yo4Bvoq/lG5fpPMPQQ4j14ZF\nLqkJ6T6M+FkP74gGcQ0KTNIP9eWy4oV6bnfuu7NPfXBb1a9tElt/GfV9yNP5\nXgRGtyVZILLNF03g5RSFUR7aBJebqhBWxcZnLUIKebes+NEQkR8NSn4koA7n\ntwimZE7TUSEiB3Q0J0RReCLqZfZ6Cxa+u84LVsyLJiHjTkx+JJ1n0IBEwAWE\n0Us+Y/GRiZ2PpdjQ4PzPPMWjvCpIru4SBcotDIagZ4MI2yzCXQ/kho3ysP9C\nhGKF\r\n=wMla\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoIEKM5soKC2MMcjsz88+P9h5q42K1H6MNjTTeXGFPjAiABiR/gqD4hZHrMULHoFT1Zfcc7NaO6ghvOYY++6fFcWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.7fcc0726.0_1623113109645_0.46982599286348203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.220a4e5e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/ripple":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FIoBVNGBEbBc6qz+MGbwcX2Pxtp5fZWCe7ysg9pfzOzEsqazMLmsDBoE04WKLanLYLOJdXfRVyWMBFQfLpyyog==","shasum":"7dbcc22ffa1038ca105ec2c254f2f109085e4d79","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.220a4e5e.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv629CRA9TVsSAnZWagAAWisQAKEpDv1YAYeDj3ugk7Rt\ndICPShqH+psji1PnIsVLwxhkOxRdBBe4oakIV+pWThxl7uq/x65+cE5Nl1m8\nMLJN0p1JkF7RE+PPcQuXVFboDw2/5FcE1VhUOVYRNnttnEtu5Q0LpAHt218W\nis01b/352A6dkSFUwk2xJX6uM7Ng6XhWlci+ENKMpfKeUkwxEA1EavdW70Ha\n6xsubpDA+pwUl3MQplLRH9N5bD1ImzoA29ZxTeTU84WFHjFDi0kXlY52T5Rn\nUcU7W6s8/rrclUEYgF8FIWdiT0UVnsDUfwSJAEU7/4/woQya5JPnzTL6IsAz\np2wkgRQAjYme6Ol6JKagRwOrxMnf5fY1Zyiw8mu4taxmkgKbxgm2BENb/aKQ\nGAIaeY6GUPVTz3szV5SFdNdxeick6Y/QsLfsgytwVsbLAnT7HbXTjsrQCMNP\ngauL2COOMYsW/LPWo2ev5Gcg4jboB5cBLzH9utsOqbY8EltYRoFpe26wJ9bR\nUV8eXJ2ZWKviWB9TQwpiTHrC3JNRs6Gynfh99f4S1ud1pubHUlA4AfiAiLsc\nGJdAjHJdxCHaourt8SvbnHl8jqLj5IOGx3+QGw4DMYxTYtlqv/mh/SKeANho\n6qpS6hjQYRk9okxx1lNcf/lLUTsWLQDvVeVAV5+H9k/uNwbUsWGNcZ41dlvd\n2Bn0\r\n=gxVu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/stpy52pL38lrXv6XwcwGjwQMw8Qh+jeK0sTwbEANdAIgBzxJUuo7vw3Yq2PL2Fn1HpfK5N2TvWpPLX62WGM6AMI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.220a4e5e.0_1623174589779_0.6267545638278584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/ripple":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wd4VrSRz/vX27McnmgYCjcMKd1pTeNutiG9zPKDDxryZKCjtnMaeRGtS27ud49KWmMVtap9nZXmqZQJ2yuVSSA==","shasum":"054478d6b29794ee09df796f5110843da8ad1201","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7ihCRA9TVsSAnZWagAAi9QQAIp6Xm1DnPM/xEQ+lJhA\nyS+zWSzKK2z8ntXxPcPVZE2Ff6wskSGTVya6opMUbeESY3LAMjrhBTsi8xcR\nC1lR0nyOXfCzPbN+AyJxjjf1h7ufVDEVQCWbaaUXlMYjwNHoE3KbV4aLR4x7\nqCyKBX5uHHL35fkuRpUOoCSaK1tRT20t4qFa9cU54zb4H05EA7Qs97ionZ+n\niSqtGMA/mpCeLJODHj8f1HhcgJyaJ2bIfR44TnI0BvdMQuN8NTAWsvp19Wc6\n6a8oDo2oh+L87JEF70HSDECz8NZnFIJ+F0FIWpAy0bn92ymZigmRsOkaG7uo\n5f5Q9LBrohNx+H4e82noKhsfJMR8kL6LxxD2aHahVPzsDm6uOHeySIJ4qAv+\neyQ0braJyqxgiCeZDDWweUNjiOC91SLKoIcFelt1NtTZAAeSRUEA4XDT0W9r\nHVnsJ8RVVALjpD3qeZx7fE2QtRehfnd4WNRrO8keuVNHtb0mCtGf0EXNlSDP\nvex3Hl+t151O3kQPY2hHXRnseqIExMSKtE5NO6CHlF/mMYnX4FgfDBLKrIp8\npv/RUM1TvqLljIFOgjzzlvvPi1qV+NzDqRnOM1LDGLMWKRqFapbkZ2oh25sw\naDVMOgc/+N7jVoqGE6h+3Bt5+ZVl2wndGj84prhP+DTjw5/I3NLmMhzSm3gW\nAkAn\r\n=jtFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtGlFxXy1G1IMpMob8v1T8GBxcSGuIE54f09S0FWjW2AIgbGqL3yM/5hQGwhcJ7ptLbOEPlpLvkmmOnF5tG1qskFQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.6b2d6ab0.0_1623177376990_0.9304676417207327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.2b20825e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/ripple":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SKyE++4xD0dX6OBWIcXKZAEl0nRpU1oLSHu7Hlai8X1/D5Njt8OASoJykmUOI5PuaeIpJpNoW8wl78IQlk5p7Q==","shasum":"1958b5d8649ce8e1d18bcbe8e18605c4a42be2ed","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.2b20825e.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZeCRA9TVsSAnZWagAAqOQP/1Jrt7TiEPTm76JekHHV\njY8kdNUEs1g+1iD69yhJ80qWB1L6tUgXpJhQsP+FnywliIezrHeEEIIoZVrD\nXRq73JQfaVN+kZOjl+wkHUSB+QNPyLGjGzyC8MiNbJn3Ac34RR/EBFyuPLaf\nx8le+LPuD6CTtb5FIpHaV2eVvHdh1SemmTqDAaiVdkYXedRceFZoXc64qTF/\nG/ArKx4W1sv5w1x3mB7InkXZWlYgRVqoLya7wceDDOFUnCLm03GEfPhglrOQ\nAwGAFZLBbhGE3AIgpKJPGW5uKIt5ipkx3M8J92O91kQxFoGSWKdzc0zJkIxm\nzQThEoFrfa+Pn1sxl7Orjqa5MEC30/BoS0Sy7Xt5vOxiBEm7nF1dXc8mXJLE\n+y22OfCzlxaz/m2YcOSWD0PFxOmHajuYtFZzAdRwZFSghD6JnCPPxn2gTeUN\n8VrtB2TTtNJkCEMVTBqNBHJD9FrIdtIptVbEVwB6l97+hzaXtq4NriAYCr8A\n9qkqMKK2Dx0pOANuXW5vg4mvXhDGJAd0wn1g8NsVo2DX1cfTFgnoOZv8x63l\n6wvrOUnd/Y3j4/gI1W9RfCI+rScr+Gd01lJBvKnjbUhV/xQZ3MjcaMrQ0KIV\nDaeB7S3YH0QjSLKk0ILNaLW6JL7uLN/8OHQ5lLFIyi4uiGruVaGPfuzui12e\n4OW2\r\n=xToj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDT/Pn0RJXlhDV57mhcaP8re4+efDyUbigcu4ADYLiJPAiB6kmsy9XRfzxyJyVvJ0l6Skf7sxGQKMnuUxIIDqvCR9A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.2b20825e.0_1623455325887_0.8923824602237396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.e1511867.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/ripple":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9GWpkmWr6lm1OHkGt171WNx5tKTyygtjZAw0sjMykyVn14dAGgWHYMu0mXrfOqyYpLeQGlWIXaAwCnEQFtc4vQ==","shasum":"9ab9a85ef44a0557d4dd025958ac48678f9c35be","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.e1511867.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZcCRA9TVsSAnZWagAAkocP/3R/Kp+rMvcyG0j2j1mw\n4hgyzYeUnCoP610Uz/ihYEx3xtKUQiLUB9COKy1EzW1DPUbPi8sgUFH8v+Ut\nZzjVENzOPOYuJ09xUhTjs8WZzaY3nTagNm7yaSMAiJBRXcvO/jxcjIOd7RWT\ne//3y1l7BK4kCDNNWJmMJ0OVM74T3Hp0QAaKgpwnDYDpZ5zOaOMYanahqhRT\n5rPWgx5io3CN+NwIijThdUY5fhJBzyRZ2tMCTjMNE6NtIrb+LyF4WWMzM1b/\nQ/Ia2a87Mu/6y0Ou0Wwp/OarCAy11jEz7iCW8/UUO2JCmakxgOsgIgc5t8/h\nsG45YyJO7Ckjrro3B0jC+jqAxgBBwUQnaI1DtFyJV6Jl6l19FwTN42qXZOlj\nbMCpfYDIV/zF6JQLxJ8fkNzsQgWTDnKxPl834i27kFdCR8/kVnza/nkhtJE2\neAwK2/LeAw3k25S+hdmNk6eQMJaU9u6BeP98o4wIWtEp/kdUgY4Ae5uJ7Jc9\n2LnSJ517OMznQCiWXE9V9yCzaRlwnmd4WDsjeZtHxNAfSqHLpBYJ3Lc3+7sM\nOMLIrdD2HuqxlIdWPKdrV1q+eNdXt88PEO+ETENit29d/i36PYBkiG5fn8Ae\n/gN+XVW9NGV5bl5ZaEylkdXzgTiWv0SIQYZcE4m77nLzWtcMjfbvlcXHrTEy\nSDep\r\n=F+sG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHL8WDMhVVaxqOcmqv9SzXRpbTGwlDFMHknOdDoZULMIAiA2SBSZWKyAnKUmifhJGVxjOZFkkHjSIWx4NnTSBI4Uhg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.e1511867.0_1623459420538_0.11910693726316146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/ripple":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pOLcIHDageCGT0WbYIFkHPgjQ11jAeqEkvcLJRumxHBET//0vHOOhs3YCeBjrpAoBiMES5Y6C8dFRITYP/dZTg==","shasum":"a58e829e1580b2ed9fa096854ec7873cbc84c9aa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTCCRA9TVsSAnZWagAA500P/3rDZkCPJeCTb5enamjy\nOWoGlvkv6W/9UOWwmm9VrwN17PyQDe/zQo5M4Py6Yl5weXlOCRJkE/VX9ufF\nz7f9tJ0eiS117G3wQSa/DDUNTtB0g4FUim2yWj4yw/p+22jprEMHn5p0xnnk\nXwbpzXwWenaOi0krxF37ndO6dcdBF34jyjSvQiR3GRff6FKohgUH5CvX9RUX\nuXNWG0B9DOQv0FAlvagm7TxNBDLO6AXCrMffrfBjoZNgRZ/k8gFCu2R7i6Wv\ngU8cjtXm749QotQUPQcPKREUx+56Ts+eX5WQMc/ePQqaap/fwdyXK86GQaw8\nB/ukb1HwIaTO2JS5bR+MUZ4HY4uDp+7ZsrS4D4WGM5Dh2JqWKetw8+AdeWgY\nM9ONgtkN4wqTFLvpxixKofSr3Q5FEvUipHm8gwZz20fVBvQyi9xqJm8iiV2J\nrCr0/IXZf13ECSNoW90TejmDbJFRBSGqYpsBsFJR7pywhWbPAaFEgPSYTbNZ\nEOON3BwsUhWAbFiOYOjI1nejOB2l/FFZSbJdd8CLgp+9RSWkj11TUB02/Zd7\nnZP4+VVDToWQqL21YzoeT7LBoNLaLSK8IsGqTnySJwJvZwwAuMSNse/rAfcM\nHEQCHEEwACUmclGHy/cqWP9NWtP61LtT9safrtJiYLSMedXd3RwjeNzqx6Qz\nHtbg\r\n=GgNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj32ef0HF7MEDh7aYnkkHYkCz9Hci2ZPrGQz/pkdNkdgIgUpMtJJ9usZkBJ537YlcpA1ZyZNwcZbHFlEnbSFGOvwU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.ef4a0c0d.0_1623786690415_0.775876041154967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.573d8913.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/ripple":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BDvH8MZGALttupLtLpF33MOGEu3qaSvqaeItjL9qp+a9XSMfdk5X/Peckp38NaSfVkdSRTntDB2+5AQlZF04+g==","shasum":"b90672a1f8a2419cdc07f8866a809c0ab86f8707","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.573d8913.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSueCRA9TVsSAnZWagAASBYP/2PcFsc1A745Ue/gQph4\n6aNQnNXXY6aJMjbGWzN9nd+KwAQ61XRPD3a6qeHGayYXKNXmbnAJIrqrhtmb\nB2RYbkkDx/qRFryV0LzMGAcQ4cfTaiOydiwSHMs7E3lV1rImxFTC+JdR+7I6\nfBbgbTgrGZ9UZ2xzADe8+PcjzgACghA+vs5Fs9GmNcf2gq/cywDj7Xwp5ULk\nsp919NDmMmGlHy7omevAiz3Jz4ifXYgAmlgP4+98ireYgRedYtyyTeuwqSmG\nOCdowDDmFIuR4022uoavX/60552cYoErvM24FBdNIwt3ME+EV6YSflFJdUVk\nAJrcWC33o9dF8XZwzvQk6EcGNcwXTl9LIcl/N++e7upw0R0Bkkm1gVkd20Z4\nfWcJ9yFBsJbhicnz7yAgtmp35LbJvLiA15GWuFA+laWRuewIdb0uQ5nm/4uT\n8KF/Vt/Gan4eUxaG5Kbp9lAsUESECGwUbCKc7Pcf3t5FLvolG3OY0gVltpZw\nSF1w1oWp77kbIHViLaLSLOt78ACkXyIJk/+W/vR+TlYBYhUbYEfa/eSkgmie\nGmXjx1ntoo5yVS/HU7+aElEsk/rgG71AFA6TNLtOChagJRgWlz6Oml9/eb+5\njYmWW5cD9FY1xQliNLJ/BQWhPISXtBkH+5TP8WP+bkSgsfNQj3n4qhv1t2T4\n4M3D\r\n=XyXO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByECjPQ3oHlhbfN0z3JJGhHI8Ifj2QJ4NMxyNoBalsxAiEAn69th33xxdyPc0DaLdEjjW4u23KC8eeE4OqLeqTGAso="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.573d8913.0_1624058782155_0.7731783152911484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.21dba001.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/ripple":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Pglv212ilTogYU5pIeV6fN/PfOWFOuSiON2L1u5Uy3c9tvwOCCQaQ8CsLPMnZnOTx1l7qdwwsU6CEV9oiunKtQ==","shasum":"348b47c29b1d62d27ef6bd8a02176412f934b976","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.21dba001.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Qc+CRA9TVsSAnZWagAAwxgP/1LdU8oEL6x4sKbHZQPP\nQf1BQgD+v5ngGAK0VS9+RSIznGVqRwzMbxy6X0++/G4q//pt+qxav93W/ujY\nX96ZaoFkIuEHA0vCZfJYPU6TNQUm6VNgvAtYcurdQmNld7NQ1nutann14bPg\nl0vtwo+S02BNNcudf83iFRpkL1HoemFuVNZ2HQ17PbYL8IVn1Y5ZmgT+MRTF\n5oQB1+GkbHvuFZICAlVRKCv4WnJB7YslMY0KWi90hbR3/58fWZUHm/8E4tki\nLbDMNOMccKEsLpXy+4awLSRS6qjld4N99YGB2rI6HcDJEClSyA7L8//9zxgN\n6Ce2zWjgnkyjP2xnnVa+DQu8nlSOZG/qyF/1sN2l9r8xHTFK+lsgB42J9933\nO8czmu3+i14smNoR4yai5YNmjEn9OLDNK3BWkef7f4tVn68GkkmM104GEjRK\nTcUFWMYHSCP/quRumBmMr82klvCg8ZLuO09KTWhPnklBsLjVIFlOXf4mjLMi\n1oJvKrzB0mzJYsKDqRJXWXyFw5F/n6dUrkBvTzWHsJvTNI5GjcuPU7/2YjlN\nTvbuvvHX866OBOuz64qO4b+E/a6oHwE8gJpdrChh1VsfeSiMf/LLR8Ym+PNM\ntqnpmKta9nL8+ZXhXDHHBXD0m6G7tbUbsdCvVg3d6Fdm4v0XtCQZXVnKd55/\nEjnN\r\n=8XFN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqRaKojpQ0/yMqLVHer85vyfSmD6f0OzkB6pAmrMO/0AiEAsAjDp+a7YN0XK9nGytEvx9i4PzJANugND37gLrvsvY0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.21dba001.0_1624311614544_0.5382223543453759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/xw/0yoyOL0GoJLuppQ4fFVloQNYvHvpJcxu9CHDKJ0fYcgLvY5UMlvnNxqVv7ZfO4uM/Mpq41cbxHSKjl8cUw==","shasum":"636efb9d277463e84c11ac9c5264e6ab0f473371","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q1yCRA9TVsSAnZWagAAcIYP/0IEO89o77lfFLK2X3FY\nMzoQaqjFPiImuv6AsRITLBUccsgqczB46P7dwvjHDOUNRVSwCE0g/tcAyFH5\nbnLE8jCfDd4KavJX9U4PJpL1Iqa4xjPRlgcww26ltqXBJoCsHxFWvh+AEPj6\nkpeFQ5hNyIW8xRPVFfnNtZmvggJyFiV3OUL/uCGXoD2qHkQwfvA97KOCBGlL\nZXs1YgE6cZiLnhtVoGGgupOUyDuW6poxqbH2LbAEaoNsN0nRHgw8alYjmVFx\nwvHMnaKBS8kZOC/9RnNWbkLCicaI6K2WsJSzB9sfrmh5gAm2/sdevUyLUS22\njld4Ewjw9gg3AwHSD+/4vQvUTXifzeSCqeb+29qvBUv3lubH4yzJKDeFf6ja\neJ8Kx4Ct5EDYT0M6FsYtMoagwJhKVYR6QK1dm4VqJ3bNuQM5AZoNBbtPlWxE\ntYFqkfY29mCcYf/n/2eqt/IGvkaRK800+jsse25XJbpRFJ/cNlspuVWdaqYl\nmpeJt9YiQvroRCw0WDJDVO8WI9JaFwK4PleJcd90Q/H2j4Zp1tOu/PjN5WCW\ngteemG5GCOOs0GdPvzgafGXwuWJ1vsAq3vO65MrMCpMHVyCl64cKOLjzAtyA\nHTelkEDyTOTxJQQydHMvSW8CAgELPNsQyrgM+XI3Tl47APns2Ootr3DbKvQS\nudAh\r\n=9ibH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7v45GWi3ywn2/E8Pa6PUk1NoSLFx7dLYW3XyLzxxEqAIhAIwtVTIBZg8Z5FZFFIB1/jjz4xvYQUJtZDtRIGiV3vbh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.6f5bfd0f.0_1624575345655_0.474227369375011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.fd8360b4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B3BuxEeTCaqri+gTyNm7muNwundiaUvXFzDjjfWHc2aLzgXh7zRcKRHX+N56Rb39xfAmOLdwYahhNuueImCidg==","shasum":"8c69783302fbae3daa47dfc1d3545d1329359c25","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.fd8360b4.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1im/CRA9TVsSAnZWagAA/C8P/jjPs5oOeDCT2KJAK1i4\nyotDxu66zGSgtvMyb73KdRLExySns9xue01Tw3HWsleKa5iiiCbmyCMyVagR\nsYxrD37TB2c8terdI0oOwDR33QqMoYqDigGXmwrudx2v0Jgfu0vfApTAPSkk\nIFOmEHYLBRXHEwhGpePfTN1u/dNx6/GTqmIkCVZ7/ZurnhmrUVdySrmOzEnH\nWvnxCG1EF1iqlfEkcGeICeUjv7ksMj9AGBHzHzJC4qHnXAXV8WKDZn91RwNX\nTomMhpSegKc5pH+JKFHRBBVPdPChpSjOjyMUl68qFatNEZzT7i/DM2qTWd/2\n74/GgogYmI6PlRPmSjwZkqiRXG7nAdudoDRB+Nrft34snZcMuntH0STdjPXU\n3gBXCOMRMmF22n0ZETtTMoqJ9LO2Kjc/UxSgW2te6BAOqSeM5je701g68zXU\nygQeiNTkse62Ci1dApnumUIZvNWPECww20+kyl2PXf4xkLsXxuzsqvwh3vPF\nWjWKjzQUb19AbPsa+pPSXwGZSeKNt1VZbi6E3FclQqZ8Gv2ttjEVBhRNsW5K\nPD7+M4KQxk5ZSEXQb4g6wZSGXEdC2TLVybg04oGZN3d2P97pyr26JI/8P/tw\nzsFy9kUDQJ4Se2u6CLJN8bCZHQkYtn0SSH6INToz9gevcS5koBG7F69kTbM8\ngwsN\r\n=/085\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRKr9tPa32r8WUo2TrldlvA5fbwTVonYaI3YewNEocjAiEAxUts5mXPlsHYBnsR9NOSyKyq63Lsi/VULGxlPMgYG1o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.fd8360b4.0_1624648126520_0.5437388408848485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.6f74432f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jmgt5VZ1thDGxoxmrgF9IcnvLQm8rZ3OcPV1XWzipRQg+LI8DNZ6op7576A3zJrO34W/ghMMJL3gguO2YuvDOQ==","shasum":"c5099db9f4d3df9ec057618ce707c1c936d301f8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.6f74432f.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kCvCRA9TVsSAnZWagAAm4IP/RcXF2+KqwX1ccMLqI38\nxOymFfYda2gGkrWd5lMSHnzQvrVF/aIBOi8QE5t4qUJGBlS1Lh+DLspri4jY\nvIikxlQYLxr7Igsevu6GUH+nE48FfBOvfsnD2+G66NFoWWNE1VlMwzW8vWQQ\n+XFl13I8SfqN12WWXaPwGWwJFmvj+kVw6Dst+p9Ue3DunUymiWAysjhT35xZ\nb029pKbK+74GCIX0xnBvjYzkOdsECzLbfOY46kHtCKwXJVwwhBGgntUa5n+i\nf8YJc11QANQm/1v1i0sFbBR+XTyqHR4mFihEuQ4+mf4KMwDWlfmM4K5e+aW3\nC67jJFySkf858HQQaJHL2lEfRBKCrBIK9I0aeaFQlTzpb4PzLv75CUxZpLgY\nyrn/QQc0lNUCaJkgbqjD0Z2ZlAuRX8xfJg8ecmllguBoTph8H+7m9ikqStay\nHdK1fHgz+QnYtBV4Co9tp98B+sDhqRpYzmtl7RMhK0ocUSplsdnxWp7Pi6R2\nSVUDILcaoS9+Z5V9TSwn28X0N+gt4Oj/Xvw1qA8nblGVkiN8AIvjQmtowkk6\nd16rl/4ol3Cn2+BeFzB6C5vjGri5/1/b4BAfkAwuk/kEKghTh/y5R73jZjUO\nOoNOg2jpcm8HJEUk88ihQFwB2yQu32Ql04Gjah+HM13pQpup9zJHTzqbzOsp\nhJdg\r\n=2i8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjUothtQE9orOjsLTv1qLpxjg9COWyIs98qT6lyaBYOAIgS2ZC3qEJzVdk13Kfx0HeBANgKmZMtJhuUZwzVetpv6c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.6f74432f.0_1624653998747_0.868511620968115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.b62f901d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hlRZEyP37NhoUYMHALrgZIZVU3+OYU5qKiA/4iGpl40M/GGRJDxFBiug5k0Sl0IxQ1aHnqOyYd/Hl9r98seLBA==","shasum":"52d6f01833285d02f026c786bdd1e7d502d9d187","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.b62f901d.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXYCRA9TVsSAnZWagAAIjcP/icH6TqUGI9DzLNEKBpe\njsAdiPPgdvWJPw1darJaKgB5oGzJqvcIDRSYjFHIUtz5KreKwTUAc9VRx4T/\nKD08L0aLzrSaYk3Vgm/r/lSxKejDTi5GkjL7mQxEWvoDSjokVizMeeiDIzfb\nOKmhWNz9iVFwMwf5oSAhjbXjtx16+cjNlDuqoYue983Kp36xs/Kx89DRlTY+\nh0Z0AkjdEjq3/OsvXmze+e8DNjYvcKjCoCARSlq6Axb/9ZfNpjwxwcFEQ/6U\nAHILIJpA8eQ4pnvWc2NEYQREsap5OFn3sxAal+r1e1z3r5a1gOQbYdB2jhIP\nAZDZh9TgdtgtUhAniemyF0OcUQlBwE6vv36aft+8y5qW6vSeVXsh1MgBVj/r\n9x8Vt8NAybPwk7iB7ORBxerib2FuMr6vFHgxLzcg82B2NYh7mPGZqkT7kXG2\nntJzG2Iy6VS6pk4d9SHdSrWMTLZOsdumesLUzgEZapcU9IKMHh8SepECks9V\nH9p7fotGiOsmPMrwsV4ncsIK5M3FDZ7bkGTrOGkHkEYFqos17fnCWXjPsliV\nt3aD91Yqm0kw5O8nk4z9x0BOVHdmceLEb1wWGi4cHnaudoCMKoZxSJEB8TUi\nwZsGHqQ5+4Ty9BTAouMv4izL1eivXZ3H/etA4GF45c8oFnSlMrqUB0SK1WQ0\ne4NZ\r\n=sx7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWEH25NWO1M1U8T3zifPR1yx7hc8jsLFVU10wovobHzAIhAM+688o7Tya/lt35/8qql4npDyp0LD30MxcDsMOra08U"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.b62f901d.0_1624659415841_0.16098522286899652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.73122cba.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hXzVtHLrIpsEdImmrLfA38yIu/QznJNj/uLkLbIuV52LbWokKKZ9uPxfyJb3o24frsB+QTOCLVzgnUevaUICgg==","shasum":"3039b8702c434d6b8de85f0fc834614076a003a4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.73122cba.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Me0CRA9TVsSAnZWagAA2oEP+QBg2xKJf74lvcyrJPzj\nokoMLzvhNvcdWZ6ijm4kvHTwcehJREd84xba6Eak216ANbJbJEG9fByaPGbh\nD79LR64ETNawY1r5fHnfBze7WWyc+PT4bI6S9ab22K38lIoiuHBxtxGXilNJ\n+QtrCaDzHf+JKC+vcAnrmtDJhQth5sFy9boFfSxSkgsjMUhUaDe74e2LsGq8\n3RP5hWB3pyosKBXyv/FGou0o0BtpMpo8cRk4jYvVZTgqpHSzu2V+0WeQWV12\nvgHJxMXynVb/ao5ew4CbQvL8cRD3qdUMBCQsIlp63mBb8EqCKNTOvBL04VmN\n+sg7dEAvot+pLeIU8yhP/PIa4fbuHA7Me3YTheFKIGZQIiLOTYM/Eu3XXXbS\nnEgs14mucwqSeGszbn9RxOF2yjxTNAEuQ46TRaoNe6Kedxke7gTTLpFav0BA\nnr1OYv9VflerYVzevVTLpmaCv2LNwbg1pD0AC6+f2RIXTYPKtg0T4V36IvYD\n79WSSlo36ZUHNNX0G64U+lXws3eBEC5MzxWez4GZZEFFIKapQ5e8d/PHr1cY\nMHitEGqhl8R1gZPfQMgCilyJszXonrmaeokDHG+q2i24jqJxMr72vhQNLFQD\ncWIGGKFQpjS037fqnjEsq15NrwEv0UmFJyBW6bEZtUTS7pCAztV0FPaYoDT1\n+D9I\r\n=3XIU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiB3+czN+fzEsTjPALg2jzDE+YsUj/JD08TWMfj1hruAIga6i0xAtxTFZd8LpwuRCJ1eClF2rrTVt3AtcVNy3hmA8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.73122cba.0_1625081779960_0.4879440728697857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.a6912af5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lT7kTC0FJObWUbsyhB2FmEvyGWWfivWNd0bReFVN4MOEJxgNiFwKTxndrrSptpV/xIF7OPL1TrcEWCXM1da8jw==","shasum":"264f2d6cbfbe720d09a3975ec5a15499fdaf9e8e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.a6912af5.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jS2CRA9TVsSAnZWagAAItgQAKEzbcR/DztX1PkCYYAk\n24X5OAw3SqAKLbsw1EC+zWOznNzWQq2lAw0pFR1c2LDYmIoSGwA8J1VAiNV2\nPbTe54iIY38bNIiJ+PCqBoAgBtQK1FNh7Gb7vaX2paXrc/suCE0E/HEXV9G6\nb6cY8t7PYIaOnT1x/xJdTi5j0exwixL6HolCJMUz/L0Hmk35yZ3hU9CZyx2n\nSJTjWwZSqqwP0oFbPLrUfWVxCsUY0bMam9XrIyWoKMTjbenEl3eEAJXe70V4\nuAiSj5/T8Gn0I1J2s3zu+rBg/rF8KEQHxmxxX3RfK02UPAXcDJp+TiQW9TDc\nudjQU4+OA/9FHa7tOZIbfZNW3mlgoZMy5ppwyAp8VzF/ebDe6854yHjciOwI\nyQ2Y7xpx/7BIbYJNbjKzP9h65UIcFDwGOInal0FgSzMvnsiYIzJ+J7i1F3ON\ntNhoQqOc0x8m/lkagubUKlZBdwqvHuo1PQJbDAEdLls15qo48TLVwOlroKaf\nhJwdex/23SMp2U6pDa4z2UWFvowHnXi1oq8OejXMBhaTo1LMgNEWFMFAczqZ\ntaxh+h9XggoXMa3GZ/EvscFS3oTfnI81tohDV+p6vL9JPBRAmndnB/+jeL5s\n3LJU3ROYvcwKY4lRFBqtA6MWKVlNrDYyQxLFOmSgjuf2/wQj7FKC5B6djney\nzCYi\r\n=WYCo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDUr0phcIzkTLtW09d1f6mouLnzmhEb1lyfoNNRWRanAIhAOKpy0+dBmkZZFdJYdgAqBVtOYtOrHDMNfjjm8Zgf2g0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.a6912af5.0_1625175221830_0.7099430911348892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.134f24bf.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ywSoxJV+6LzYVSHRGfNa/2iCBjGhXSuQSyZjWfFhYcwwl6i0UGV4j+n8cAfLADn9vwLDsG7jIn9dv/oI85HKJg==","shasum":"0a98ec05538e169a7cb8a6f65a6c9628b8ac46c7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.134f24bf.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJiCRA9TVsSAnZWagAAG7MQAIALfNnYVe2KzsVhXSq9\n1E1oHqCo95b/POwveF254C3zq6zbzj3FiE9x5DA54rJGtV7crW2Lr3G8brad\nrqHW7XfDhgE2yCyFx8P0JqBsGEiuq/QItoXvI6bo5Q5I4bF8i1nwtLaDCIZm\nxf+5Hv2KJCZu2FOlyHFz3Yi/kft/qXNoORunuuhG2ukOVjUJxGD3AR7o63p4\nZ2yTx76fUGQ8g0a4Qy7c1JK4dGGQNVxM63Md0X519m0mLMgSqYoinGdKsqcn\nEziJ/NshUjg5q62edHhaYzzZFlubm/kPVvM+U34fY0tG/+Vzo85d9N1ziLOt\n1Sb6f7X5gBDUCW+MbmOzXdK0rybPZ5yeXQZIeNc+UF9B/nBfK+MrzAAl19oz\n1t13/m+wIYUKJ3wcFYAIQIlHAXml3dPxT6bvu8RkYOIN6Vp+sAqDCImm2+dt\n2E66v0VVRdSqAPbHa/LZLW9jNvV+xkVblcMxAECOfS05gKmR0NFDS9mKNbHf\n+l3CQmgS4EnVGqjRf9/6pGEuXgvXfc+Oql2NmecutzIS/VG4vkJaRnA1Ly3E\nxQET/mimlZYRS1Nzbah+FZWzBPWMMyUDioATS8pcKbSXJxpGnhW6iklYScjA\nPG39AvEkRiCwEo6ZpAvlfjuS6j928WEG3Gyfkl/eeuekiJptGLVMKH4TtDKb\nuB9l\r\n=O/bR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOKqcXPeaQ2v44D89/Af8WwMtOYIwJTie3fWkbdFAOsAiEAvEVwk4dnih/xp2VELNJFO0P00jBPedwUgkzPVJOaUtA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.134f24bf.0_1625178722361_0.46299949863575907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.1debb78f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JIf3ldqHf8SR1SRmSCXo67AcbpSQ2dJE50J9ZfhXDDneDzYeUEHDGG7mazv0Ph/6A/k2PIbWOoAG4XfmiCqdJA==","shasum":"687a00706df769a3dcef72435b71d27a08fa2331","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.1debb78f.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlECRA9TVsSAnZWagAArtAQAJA/YowxMqHDViL6LLHQ\nwZNtNsOnqPCy1NcyuXA9cdi9Bc9S03TvFeXrgjmgnn7yvJve35Te8fI/It3P\nrvgDu8XV/ymhywxPGxCvsIlxMOt3u4b3FDSxSnDtn81rypfUNEPFHfAm+R3w\nz+FjAPSWJ2luRD5rcX+f2sPEuTVSIeYPlOe4jDhltE2/XcQD+/I0o4koWtPF\n5pO74JPqU/IfIvsZJDsgG8E22Uvd+C7MbwPsTeYIM4Nh4F+t2P43hRMuLHE+\nYGq1AivBs3zslYOmdWKE3yvgJ/JxmKGmRmazFzttBU/JIGVSfWPQATNpw0pN\nzh8DmcRlZ08p26FtSUXbpulrUr7N/nghP6lGLySmDKtpTt6+pVe0PyL79fHN\nKkki+e61VdxJCkMiVv1ADkic9g2T+OIwkf2pHMQf8R7xIuXh+6Gz6UeA7K9D\ntyq5gWeCwTV37WWlyv9gXtjap0ihRNpp4Bsf04QUZoOoHxu/r1KYeP6bdppH\nLFBX/ozMJO+cCwp4QXgKMb4BHjbsLlyBQG3SayoZ5HnFIUUtvN3gBRDywAS/\nZQ3P5bmcT8I/7/synacUZveHvsF4gXm7m7A0vkv9AdI8VlZaZG8ktxSAb3Y5\navi47NHVrJ2ME5nrEDXiQ4V5DEc3mstgooxxZ5f8lfs31U9n12XpgN0WkAhM\nsApj\r\n=xVcC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdHntWTkqBrYGJTcf45Y7/qto3xxTzGzmkPvgFCud1pQIhAJRuVp0t1wGa5GFfkfxWv7VOsKS8DaYhbUP6VfNlcMmJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.1debb78f.0_1625618755603_0.78153119446344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.d53edeb6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iICnSeTsY7L/1jkB/oP9Wu8hgnOowwugXTGKiwfJmNiZSkAtP5JqwrECcSp8omf7Ab4rVs97R9CIAIn7JzHZpw==","shasum":"0b3a8a87ea13390660522bdbada7dd30f30ad64c","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.d53edeb6.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2ICRA9TVsSAnZWagAA5T8P/0uk+juhZfhV4uGM3JMz\nMM3fh1d7iQdFhGcLH1enZCjAzw+qHjN4Y2BALcSOeBexwM3pU0fZ+zWDY33E\nfdimYjeiF3MyCCiySzu031TARfxkV5noPi0ICOjFN7MjhSO8MsnfpxTlJuto\nFcWeu/7QPMeeVYtMz0Rgr67gk/34dsyAWJi2jUSN86OeyNM1R7G899mXY9h/\nHIibHjjcjYQVjy3md9lA89IMFvrIcHf1Tho/YWc1DnQT5zTmZwSkn05+WU4w\ncTms2X51ePk8Hby6MhvEnb2JC6lzsYdHU3XVu8ht5Idikp5oB4tA/MwJQxMe\nDp46DKkFd5m48OotnOMNH44NrWnk9zZEJyA7ZkmzQHeO8LCQvAyYNt0ggEIY\nbMq08d4E8ZUOaSteAo6Upi13B5+k2ziUSDh1DcTiEMpTGV/3A/Bu4mzsbfCM\np4Xsb4JZOozjooKpmRRytuKEeOupKHOd4la6omUxZ9wQK0UYXl4Z0kGo68OV\noXaWKAj4CXPPpO2W/0goJMSmyLWHcvY9Kpdf7GlXYv+9M1UR1iNcFr609ANs\nzuIwswRzMZU9lEg33quyKlUfptJtLp2P+MeoS6Xabxij/CScyl/6zj7FuGob\nA1Cg/Y7ixRU/u/m106nsMwe5J70+qgKuMmG5Q+WmZqYxVmMp3eOxMFexfDJK\npBTv\r\n=C7/k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6pyrnlJ/GJmzXwhqQHgUIxsFQl0H/01yOgZ5maxx52gIgS6WWm0wr5YmsC7equ818p5tzyqk3lqs1hUi/aj6MYnc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.d53edeb6.0_1625677192081_0.5152091819203257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.2226489a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-toJPcjUaJ+ERdNkhtl4+l4BrK/NhoZuwWF7RidxbyUiblI3azYR/2/ZDQ18j3pzoMS189HkHlPjcLPiZcwwO0Q==","shasum":"ba12dfbde938fb600fe2f277cad753640e025770","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.2226489a.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1nCRA9TVsSAnZWagAA/7AP/RW3OmErNODaN/6JZmQQ\nUL5M+t0IiBC79lZzvvNmWMQGM85VupJykzdmCGQKGdEunaXnkI/6XuC7WcgX\n2Ngkgw/N/vsi7MXTkBcXSqIpGUHRVWiO9HF6oFH/xslY0HTIp2SAlE4z2adq\nyHv91AuVoYU42ePlllQx3oSVjL5kQbOMEk8tUQGIxBbjvG63h0QMio00e8jf\nZdHX02u3PVJAzrEwQuLVppqlde9CaYHm3Jxtt5Z/Vzz+v2FJZbYZhlf4Ly8o\n3+alxm0+CO12gMztIwhzlqptyCq7OYbRBbHOCkX7M6loisN1GYYjh9dspKn/\nT7TXKkYEagvEonUix/dnTkg6+EJte7sfpVeKujAjJWasb04KwSIPfkcDJr0G\n4myX3RRQI5D0hczViHVRjl+b1Xf0DozC/YAd+vgQ+rfe/+6Io3/7k86naD6+\nm7bj488HVE3fvCcy7nfaOclGoodq13Jpm25OEJ/pfqPdPWEI1ixSb/OpMoGO\nlcjYRcrGVivRhRmLTcQxjFg8FUr3EIZ1eExZpC5HU8tRz57jVAwRBkWNdfsT\nIJBnZ8hPoBywqQU63FXTm9HgXftcJQ3S2dM8tMCSN9dILErP+KRRYDPnRR8t\nlO6gIV/05+pEX3Xzc75zDxbpx1RNORU3Q//Gt4k8bUnZhITUs+PsHaamQuVa\nLHYs\r\n=Wpc9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0X5JeA7TDeyRwNmx+nXOYgndsUF0YvLGfrVur2FMJtgIgNa7QcsoMIyKEZv79vu+0wQeRk7ZaeGj9QyXFKlLarLY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.2226489a.0_1625767270972_0.817056491732062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.d4801c11.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/ripple":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WSUJGSCH+IAwWinN0xrItpMokLD+MZxXjd6duG1K5W8Q+21pQx+6MnpJTVMMnP1VbS+iMAOHGh3h+yZuJSNOug==","shasum":"bffca645cef43fb52eef8faca8a01521269b6ffc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.d4801c11.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nRCRA9TVsSAnZWagAACccP+QD23pZEfThMo38k9L/K\nHzqxTr+0Q8i3+UKtPseClVXVMyq/OQmSNGhy7vGEJxQklzVUj1TQdYN/1GpN\nIBbTkZDneW8aRTVnBFEdV04Y94JiZqM6fGRF2dVNYUTVT9vVYz6qrgQHXHIU\n9L+lbCHvS/CHA6uP5H4u7M4siFz84A0K4tOdBgb6OkJ+E/eKRoMYOSSyPqgT\n4MnVpO2g5eP/r0XAz86KnO+UXGsENiltE2zKZ5g0I7qgaMJLAGHKf3GXPU1+\nLI4pLo8oBEt3w8oAbUcZXtCYAbzSPDkomtXeb9/4mKBZyrzlK6j6gwoZbuM4\nX+ffyEdXfxofjqhvA7fbfsQgW88HXxjdhntYCXwrd2MgcWcYw4GqUuPf8zsO\nbCxUPOaXyC8tSw7Hrq5hHIWlIWw+DHqO4P34h/g04dqi00BsPgJF5WEcbzSM\nKO0+4nWIz5AoG2hdyBMzznP9KEs7o7B9j2cfm7aIWCHqgwNII0UDzIGKGu3T\nX2lva+tAVw3rZmla9Yk2tlD43upER/SNonoAugylTtumfFln+ASLGOlvvkG+\n3arsH+W/M5HQPfo8xtoSvtPl7aMCrU6dtvOIkXr+41xI5fkP8wdLhU8kVuaH\nxvmk6o6wv20H90D07mFh5QZCX0lW3W1VB1PSFU0OMcNDModB7tDMEy4Boypg\ncSU2\r\n=UdC7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoQ+zSE5yYe/k91RxhXfoOVL1G4PhW7HBDP8OJ/u60pAiBsEjyTM9bUtjM3I/+XFq+IYVtrbowR/2sgouTP4QiEsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.d4801c11.0_1625774545340_0.2277469785564743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/ripple":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X/OgVhxjkFP+HYNzBzJ6bWNgptdHfKKIvqHJZWlxiVi27ymNVm1UFUVxdvi7IcZclHmu2pPUFxO3IcI7j9O7Eg==","shasum":"e0e56499349fc00596daa56a2ef09ec3a6162b92","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjqCRA9TVsSAnZWagAAiswP/0GiKCfDTtHGLBTR2wha\nPiS8Zn2rxtrA476BqZSBPWmUDxj7RxACeP40yJuTgOrZCP2NwJqvp6k7qvuV\nqSiXsIhsbuXR0UcvWkVcBJMXunLaKWemTU4PMdOqT3a55Ixo6N3nhCZqknRL\nB5t65mG8pZXGd2ba3NxoUEqna3ESqhIQZsSpC+Y3hbLlEsp8zeKAeW0ijeDo\nXF9xxGrolpltWfG6cpQXaAm52PRC0X3/yMGPFljJGJT2OzvgpeRvRcglhAs9\ncf3EqJy/JBTKcK7fLmo/nnd/cVJTuDqWfqHoOt289rBHAP0kzjmrURhnS1Y+\nkNTVOLH33drHfyEAGR1RFVx1RUPKKvw33axUdFHpaeFWeYDTg+ogmdcI1rMN\nHIz4dtFzhL1/c2lUyBDjGUFyIXRMdsdmo3Fakaxf1sF4NQGqmSqcDbpigfEt\nf/RTvjBQD+uCS61+n6vfGaQQofq2njF0AilSS8q12VV4Si5upeKjB+Z/HHSV\nTQReUwuk/uVqK4SD/Kh6m1Tn89IXzHfeYdgmarJTtoHuSCoZX7SH1g4Ymlx+\n4Ixgaz40JuWppxXdbng22E/dlMZ4IPgp7KYDnJWRU7mPKFvXGj7KrAf8SgfH\nJFsQoQ1mU15Gm3Cd0GftXjxCmDIxxNcBJjDPcIREGzRTnaWpfiyUCOIRrhcu\n+slz\r\n=pDMw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3pXo/ERKiaKipDKgsHlniW5PbsWizMLvOSeuWxmFh9AiEAkkKKCm1/rpwjavduMpsYTjCVXAIdwKUOSMzxYoBebTA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.7ec5f2d6.0_1626110186021_0.3872722692623316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/ripple":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z6OI/SyGhg0z12C3M9nmSIhqRhWp+8ZNVPjzIdwihlYJ3w/ja7BC1k9RcPN5DaoWf4uYu4QDTnmSSLcq9MU7Gw==","shasum":"6b2f064db8ee58127b98fd753dc681fa03cf3c2f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.86cb4ca7.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9JCRA9TVsSAnZWagAAbSEP+QDuL+FkoyHcKAbcKEOx\np2eLne6JVV9knIAxz7UaNOHrrg/SlXD4Eybf8DdgwdeIszq1MRD9TFoMcGk2\nlqHUxsGPdqUPT36KMuYStQoUTZQ+XCNl1MrHCbAGwxw5XS/56cP49sXgjZbA\nRAGZSHySyBN3IzKmhDJ4Ta27BeBmBPPWPc76H5qsqk1LxhbNJXjsRhgprRBG\nztpR723BZYr3jL0q0wF/YKtDLTIfKj39iUW0AtpbuSbD/Ti4E8gSyDItKqy7\nPY5RcQiuJnhcwSpRbsqLgX3OpM6HfFUd5KD8TEIYCJKCzlv3Fp8NU4dFC9vf\nilCq6fkNMygFx/R16SOFstTTvE6lXOszNltLbP9LQoP0NHSI4Iy6tQPofxuz\nvH4Jq7s5xnYNpuv60U5lJPac6wMTQrfo7L6QXyTjNlT/BM1uwWVKnIOHrZJp\nPOezPgPjOc4fgAY5xQT5cEt4v2ADB2GKH2jFVms+qIBv8wwgl3U8R1JmWhf0\n+oeaAFFuzV5GnkIsXRNWXxX/SiOHEl/l2buVKkWqMl6YI3IHHmaVLtL6ZwjG\nE7XB4R/XYPTuR7S9MTuqUV/FqVW57YyA56ESY37MdHLdrSryzl5nP4OLDJl/\nV6RtwaXVAZkYcm5vEUnSzLdomywpQ3W5B7sl2yq91jUqBLVcle+qdZj5CP6e\nHR87\r\n=dOhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDepFZ7cQ4gVjEUvPQPpubYRGm9skJERYOSSr49jnl9oAIgCMKX89u+4Bt7dL9bxS8bg31HVgyzAyc9f4jnuzMGKNM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.86cb4ca7.0_1626197832894_0.9921877880658116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.cb42f5bd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.cb42f5bd.0","@material/ripple":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qgrzbdiH3cYn3DiipnAZsuHVqkkpf1UYzRqSBOAXL3nTtiBXNp4jPTIHkJHIP7/56ZV8hYDGf6BYzxpmQ5+taA==","shasum":"45834561d9235397b8328ce05e18a43312e498b3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.cb42f5bd.0.tgz","fileCount":19,"unpackedSize":74458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dk2CRA9TVsSAnZWagAAasQP/3ZxhVOQcqrA2HlryKl4\npnKgpnqKa1jkxKZe2QljMXKPvm/A3Vbvhh66pJQa4pDxmsPm5qEhVrOi8JNN\ndi5TlNrzaehtv+ZTDg/D65XEGXWM8gO3mlThDohGrndYHEejilppNNkl51eC\ndMOjYc7kq56TDZDJ0/ECQthJR/Cvy4QVN3J4YETaLTIBy3DHJW8Vr/Kd17z3\n/A4BUh+MaiKQEAMysAe6kkeYUKO0ydHDlBJ/rmFCGpiEqeVVcMNVE+kFLZUk\nXRTJLSbwFeCZmwN+DYhvxO4BLjuXIF+aahFbxTQ+4u9OpJotVG3TzRLYsI6n\nI1QeKlTE0tYkEkXUIMz9aXczseS7v0IeY1Z9R2GduYip/L6sN3Zsjgi+pDlA\nSwWJHwIGfBhauZRWOMutJgx48U3KJq5xLjXwKeO2NWGcESF6/vp+nVqCQDUk\nfURpJs4WG76jogSPbLPfIThA/KH/ha5N2S23cRIeis1qz+o+ULw1xcWoD8WE\nr46hOpHX/ItIKpBCTM46z1sJHOiQqS4RrAYeag96airSFmnEEMPGP6Q3RfVw\nOImiTacCR0f5fU5HeTAyiR8YP5utg+Z1I6SchBav3lCWUm3gsswbJCy63iAm\nBPc2F450J8JOHarbST+WjhZtRweR5eHhXctArbB5UcdOWrGylrtsy0JdmaJc\nKBzf\r\n=FlBN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD3SO0l1AYl5Zcc/dk1iAMMs2F4NVnCYcEciZZgFeLygIgPd6+EnLi93zmG8nugaCMFsWP0NdgDnjHZ4D4VktQyew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.cb42f5bd.0_1626200373786_0.9408307136441765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.bc9a724e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/ripple":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jpz8E8PKgjO0FaKRZYr4wskPTxQouE8Z4vX/gr4gf+ftySNrksU7z+WAAqg3weJ+I3klcxjjx2y/PykYTReUow==","shasum":"c62253ee13bd1fc84aa6162fd565879cb3c6beda","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.bc9a724e.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5pCRA9TVsSAnZWagAAvCcQAKDtPUF7fCKHZYGj5Y4/\nmC1R4cN3XFoOtaRTSnHZMQU2unr7BiNNV/Wzakrr5N6aOjKsw4YR20Gmlt1J\nQqorSPqHBTntsuB6WXQIKpCNZokVbY/0X3MG3mXlbQwoE+JjIuSlnbcrL6WT\nUJp8saMfhGJ7lqdk04peLx5fdmJGL97sbxcTYRdf7xQNTEOrtc1xyn9vwOD9\nkAtz5E5V1bWaBLbmGrjWL+ztwpJ6PdMUNPrdyl9pW3OFzeU4kLXpBI8tFBIZ\nQt6lYlnXF79TAyXFbd0s/w3syCoI4ZbskF+IKyMtsf/H2s+Bq6XVlKy5gC76\nWV/XmtGB1+FHSjM7hNvuByzscT/ny2baxD4Fc7ygVFTeoug20snCSMqysv8Z\nilPcT2paeL5F6VKn6oJ+ddEq7rgnUjpnuQLzGQmU3ciampdyyAVhl1rpv6K6\nLFdzV85oz8uFiP2Ws9x+x6ojb+qW4tFtNOAB+9/SN8P1q0n7KEBk4XlT10NN\nDpM2cOc7h5MZ0Ek9DwL3z60LzZM2f4UJdKgUamZiFcwAmylXurFr86R9vWLq\nDU8dLTZR9FYbhBtz51QM5qmwBEFshNESYdLiGlcPgyAe0IdPLU2MJitpWMWi\nSG4dEdlCDUXqf+tQ48IIyexoz/m5Ns1CAX88wBDE/8KVuQic5MVImRuNXp4u\nwti9\r\n=znOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzx8ev703WUpPK4mClyQesPvjE3SNRpY+VW4YDfhTfrAiEA5+Cjh69uVE0VAyprQD35UnM9a08uZkPg+73faEJP3J0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.bc9a724e.0_1626201705179_0.1846738340662808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.7847b83a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U5c+KIiMPSxjbj5eZG2gUxnM0KrDKeL0ru+9Gvqec++a1RZtNiyzIYmTMjVjeeLGC0x6KKJY5YKYwAcWa7phkA==","shasum":"7194aec6999b38fb4dcfca91b7e868de006facbb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.7847b83a.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxbCRA9TVsSAnZWagAAhCQP/RVf6cZE1u8AZcO1QpGs\nc/u2s3OM7fXpZqhS+1xrVRrjarILBLGCVHQDJHshloI8RBtTqPglugZti/vl\nD9h2Az3tkvRTWlMDAehen+lRDgDGXmfzp92Fh3zBqbgkuxHkrXRorl5QcpsS\nOKaPTVhQYlGnNZP72fMS2rpEkqMKBnHzQxP1nYFocTU58JayqDXHQyYKbxyV\nuqKCxhGK3OnX0wlxCatJkP8sA5Zm7xSyIX3WRYZk9K1ngiaRHhDLk4rgBb5O\n3r1Sk0PScEnMjOkD/iICFyJYr4NS0mazYH44xxnWQzUsfnILWxIjmCnNWWA3\nlN3H83qFltfAhF2j6tr9lWqjNAyuNcqTJNgGTO87qsvlUt9ExNIQjIyq0D5G\nFRjJPDNDSZ0ZXWh5E5R1ro7gJTjBcAFPOFT+Q8npoYNR6NjMyRR2kybjPqSh\nn40vdKaysAMOfWr2hXIx722qpPhK97THCKLVbr1MQ/D9pJf5Gyyvh693C/kS\nnNzEc2d87S2TD+tqh7Dv1csC9qwHVy6wEYNDnN6sUf5ta1GHjKj3x7mn2nvc\n3wDX2N0TAq7Lg07iERD7RZcDI0prtayIs5rsRIqovNdArjLR2UIYVCwfL0RL\nTw5eiA4o4nkm5/65Z3a1jjWkUrZVPToAVpxXxarbgpZe+CSKDjvwH28NuFmk\nduzr\r\n=Ve+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0lplDM5Xp2CW3IhfHxvSDCcUgU/HAKTJBJQRLZgQu8wIgeJ3iRzR7Pz4U0vkNyVuKRfI4sRTqOu/XIibXABSa4Xk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.7847b83a.0_1626283099067_0.023941776926928116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-ripple","version":"0.22.0-canary.8cba18fa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bsXuuKx38R1/kEFb5ecLxG7JgdOYmbR4UpueQwpxDPFRx6KupTFCeswoinNc4MWGFULgFiVb2GgAoYVIqhhq8A==","shasum":"24501b524ab7f659f424f5c6cde56c960a688ccf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.8cba18fa.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hnCRA9TVsSAnZWagAAMAwP/RmXMYMBNQfhlURPW+yW\nPm983AuCVRtjKu0Gagxil6AZEPfmzCjnoPi21STTGWjSKQhHcWL1vnqqHG7K\nJzTJxqqtaov4pL7taLHhudYrti/KlH0v8QtiYIwEUKhgR8pVHgdmZ09v7gYH\n8B98BxpJZgyPstkAlUsDXOedWTfitR3ECWKjqCOjswgvFLVFnXgyCF/Vkyod\n4C26IZVcHGhqkAvSSl7aE2/tKeW/fWMaG2AWoUQTW8Lg90Q7M+IaZ2mGveHo\n3KTbxUTuASrXVmUxNNX8+TMkZT6XNHbiLHXVmI1+3Y4Y9ZbW2kujujqB6sBl\nejxI0jgCFNPg74sIMDuNz0BxTCcUN6PG0tU4XK85vV+CCmp3nbvFwdrqp3tH\nyOTB/KIO3iW3kmoADGdx8DPL0WCrg46YGxT+LPi+Ilc3RlKX6B8wkS/gWSJi\nPmP5ULvktrn9GUcuQRlm7VuPB2AMg9J28Y0aZiOdo0279dUjhPboBA956W24\nwcILFF5egCICxr2O9OiU0Xy1myI0Kdq993/yeNEt/MH3LvkOQ5LCcYLO8MBD\nXG2sFAfzYYQ4/dWchPAfXBg5Derz11e1QqtcFHEU0Ax+Tjd/P3jZ9npL8gbQ\nPYg8Bth/uh1fCU0EULPgS0W3w2kUhywAALqlBYqGXAvZyj4685/Go2c7/MCZ\nD6Tj\r\n=hqZ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMRwmNDKkVFSHG2doheOEW5rg2g4R7t6HJoy5Sy8A0yAiBGvkbu2wy5kODuBGdLi/hTyTwWIrEYsDL7M4aNZ1oBfw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.22.0-canary.8cba18fa.0_1626294375169_0.9266778769362107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-ripple","version":"0.22.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-HvyREG2LhyTf4idLU+QZvtgJwoR0AfFqlFQzgWbI4Xtk2CBsAQw/LTBhgQx0uwNw+mOeG1GuT2LlzJf+wGD8yg==","shasum":"7a1b56805de3c8fc2132cbe6f64defd3a18bd318","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.0.tgz","fileCount":19,"unpackedSize":74499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72XaCRA9TVsSAnZWagAAjRQQAJgyrkijf3GRZW75HML4\nGYxOM7/HDtp4AYNm7MFBzmToksfI33Dv9XE2ep0IsSDAcTm9v/vTobojGgRR\nZTzaMPEFlY6MAbPL3bXpYsvbALWvHM4M+JYrXXx+qa9p4BP5rMFebq2QD6W0\nPyxpmFBWTbU+z8PPc1FjigqFxPaxrw4xUw90Fq72NoJ40FzaWDaTcfiWSNHv\nC8zWthyPvN1sa5tdVgiF+3rbut64IWC8gu9DPmplq0hgXzk+iq/mYgWeOMIR\no68t4Mx9ZuLfoROzSAmzCHFoVK2KKhzUVGLFRHOgROlsV0pMIJIzf91dFH8B\nTPOsrQRVHjC0xqOXhh6K76y6hxCGIcyGyaHqgj2v4rA/SMHaovzab4VmJWh3\nN8unCP3SFsGepIvym6kEX9LuK3qBI3oyok8x7ydyNUYZKWAT7C4Thk2O4drZ\nFYdD4cG4THCvYilHazF4/nExotKD7BlPOoYyp/J5i53ukvqINF9UtCH7gYAN\nHVZa9NaZ5jdaGtdqsRfGyQPbOEwUhl96ooo0HFZPrM2gh4So/lIDSQ5eXhpl\n8JxMmE6JIP+xnt00FJ17bXhgb/kxttCNm2+gUExo3cDt7pQzi0jlkRXZtBjv\nUYJFzsfVNF8BDgkJOTwe2N/7ZPqB6fZ1FnCzFdwDpa1akpRZLQPajn/zLpfy\nyb/U\r\n=8bdG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJn34lfWqdh0FKDKGJsWW5Vju+JHmGf9+bxgY2S1Q+uQIhAPME57+S6VXYeaCro7f6MuBWDmh7VcyRwi755IKhjar9"}]},"_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-ripple_0.22.0_1626301913808_0.2696918425352879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-ripple","version":"0.22.1","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-QQyWWPBZ6veWNbBMWo8WQw0iY9QUjLLANorug8mPHv13ETdhwVUUozeKOY0ZCXWupNlqtap1Gd0IQjv6HVRMjA==","shasum":"53f29e303f9043c0763ec0c88cb7a6968da2e39b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.22.1.tgz","fileCount":19,"unpackedSize":74499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q9CRA9TVsSAnZWagAARe8P/3dTkvJk2K+ZCYVbHmSr\n1Y3zbZNGC8KmOyFsvMtYoJre0wfmw+kLQzmGljsww0NlwQ/JJ9bBif7MFqVD\nzdwbmxS1JRA3ro0qUDBiohlCb87SfpcYxsMjSpA1/Ax3S87n70iIiDHePvOE\nUKTKSerlm+II1MA+LJw1KUg/oeW7iD/SNDoqfojHZ4brYLvoxXj4GEMWD9mQ\nAZAPO4kv/L0NQlF7i6fkOm+6PtPMFL35c92WdV1M+zVM2YsICRvBvie+pH3t\nJQ2q4KfAxsZzbP2dLx/CqLgYIx/dqNcM50LsO/r3INAZdk4ZfTypqWvQ6nJG\nqbFvYYe6I84lqEGeYe+KM1r9K+AOUdyHHRiiWXeXGdAaG5QoJ6it5k94tWrA\n6rIHEZezKjBkOVElrfM+1XSCl4OTP8d5iH27zExapNzixdE5yWYT42iACTuX\n3qRJEs+A1Z5ah/J0o2velsrkwmlZyqz+cRRbC/+A0fEKICNJelOBnnZCfofd\nW0xojNgzdWN2kYTNlb4sIU882JhbdfPGK9Aeo8yI73Z3PfSemceQpq8CSKey\nrt7Aog9sYLMS0OjXb9DB8iGpGggx4hbh1bPuc08yhIUQLJsuVhq1JXuBDeqR\nckXuNVO0IZilEBNxW8oh0q1QIjgTp7SRuChaDXPluea7V1IHQv/iJHV39jj4\ns8A1\r\n=d3Se\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMBytorbyx9C0w+e/Dop8B5M5PSG7rvhpX0EeAX5w33AiBsuMqPHs9viJXSXbcyhoBrkrrSU4pHOzZvvmtATGL4ZA=="}]},"_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-ripple_0.22.1_1626303165291_0.5560593406594692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+iQ3VwA7r7mTusMpTsdWhMdZVnlxhbtNNdt885coO8IyEGbwCQc0CrnF+uP845Qa37qQmGv4LxfaZv9IJTI/Hg==","shasum":"9f9ba2e62af23d9b7acbd2d53746bc39ce118cf6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.fbc09b4e.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72r3CRA9TVsSAnZWagAAvdcQAJ2d5NJYaQFtPgNxkSSu\nFes/OoqW0MnPrPRQ5WJs72k6FRdji7VdEGAms7w1EHTeMgsTxWFM1ulHKSYj\n8dHFknOJuqlCqjF0gvgb8cDnlX+DRXv/fXGr1YmgYjmO7Nrcb7KpnUN1Dkk8\nkd0rsupJ7NEDzkmCvuWC6dWg1SO5DOqxiiNBgyATFH0Jmla/j06e3pXgC0Wx\n8PPxIxvTdLPBDPtt6qFzo/JteQVUbjS1ARUUtYDSDOtXCw0GtgGEBiKyK0B1\nHrX1d3I47lawCDEhwKEi/E5Nz6f3Vui9XoLayKymwYbFV42tlJHdiloVer4Z\nztJ6f6l5kUQd7rpJo+86OQgO5r2SBJ9T1VUmtGA5FO/dF0yRky75aF8SNvYR\n0hhKp9ZxvjGCSlDVK5si6XT84Sb+rvM8XzJAQgt3WlwFPCACnk5KhdTVHV2i\njThD47nylHIL+qUo2ed4WxK4dgEi7X3ayvYNPnJ/6xN3+MF8mYQqdotweoWa\nMZcWO7r2Xc7M/x7ue0W6V2NtjAAxFLKSl5ZjZTA4DVQNCM57rUhFgkvP5JTK\n/9wqdlEZkP7L52Gq2h0poXESDwVbwCss7/ugC905nd1cObULzufVh/wEnxH/\n5ZPi4PoDx5gfRkWSeWj6YXcwZmM5kTZ8ecJyahKDDURbLGL66/kqc7OajQcL\nksYp\r\n=4OVk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+AB7NJH7GvU4pTZJHXqICXx5faQncdfIufwKlnT15QAiEA8JSPtkuTtgQWX5RW/D/J7bzy+GoDGxgKha5e3UcPaMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.fbc09b4e.0_1626303223316_0.680772416042007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.73e9f83c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x5w+QeNz13/D5VrZUk+PSP+XLQl7E60TYI7ILb0aEzmjRsGQ8FhKfEbH/ivkAROMQU9okYj7c0uYq1Stcd1IAA==","shasum":"1a3bb66b5bc2e275b1e2c388c03d4b1e37793c20","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.73e9f83c.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8JzyCRA9TVsSAnZWagAAv4EQAI6i09ffJwahFRJz0o9O\nwSZr83FPtR0aXWnHpsNZ15SMjkf2LyyjqboMz6IWtjKeUul5DTMFsUapTkL7\nI2l/CpeAvoxmi0aDj10csZbMR2NRFB+FcwaEjHS/DsdXJCvPpsyHytSWhaAE\nm63E0XdllnBO4wMem5htCLWrt0Im4V/E0GaGV+1vxTzhvO78C4IcyCdz/bVY\nEGTK/rk2147vfF9XrIQZ95mc2Y1F2bMbmsK9+abtKIDSGmHp4B52MM9LSud8\n0cvO1sLpoYqFHuXbliZ0Qczpe5VcNoIWDgwlLZ3rzS0OPR7BN80etL5nEcb8\nb2S9eLIFbWaioI4jSD8Td/pgb22xCJnZjKcZOMWRB/XZzLGZ8115M3Lf3toK\nfbHAJBQGQAsvtz192dpX3AqE98WjyhLZ/KUrAr37UU4BPNZi7y2b9CH0qo+O\nSI4awOOjymG5zhc6mFS1TNzO/KBTSOPGssZoi32CPNnUe3mnihWesJWG38ar\n59ouVG8GrW68iOp5WdsTBeZxUll+oXwQtk6RukrXn8oVaxrqlk1sEnwyXFO3\nASpD30KB0L54rwoLyT34WMJ9/sHNbFnM6PDnTprTo6A1XywUXI0cy1Ge6hiN\nYFMtdgUde3GGOtvTZgXT8ycPkAZCfEmNkKH4alK3U9NCTyMo9hzi/hKYxxOt\nqzIc\r\n=B7sA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt6i79VDriXXf0mgbnlyqww81MmnQ/ukJ4ePzBsgLd1wIhAIXB3ZcK2Y0dfKmRbh4Idka/mjoxzDxyd2+yxsygRShg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.73e9f83c.0_1626381554829_0.7417993551094837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aEbYdE5sGWg5uP2MOdlFLbKqUFIp4s0TYLsZaLkG39zjx6eLNbNxS10uFRdKKGx2Mfn9UzfTcTYLg1vjhvJE5w==","shasum":"fe1cb1bdc43b46c8b8110d5f1e5b682bec715918","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKZCRA9TVsSAnZWagAA+vcP/0vWAI5AF+O2mLWocoos\n9JJcchMfIK730LnPIkT5SkCCM17cJks0b4lThSsclvX4nNeltdo4gC14z28E\nr0bSo2Bj0mCAzU1SpZcuay2XSWSKycXJWlK2bbPg/TIwCroHCOYdTPXDTexO\n3Qu8s5gmQM7f7RkaUrdZQFSr9XnhkwaZWaXttFBqJw1KgsD3OxjFdHHiy2ej\nZDGzxVCjpqrTyqPKCG9U2WCyzN96QphLHllyiKC9i2pv5oh1Af/R7AHA5WGp\negYLBvzcUB54P+DOI7KazsrvfFxyZ6zFMCD0er/LnoGHxlMMzhtlMUtIwzGN\ngpZAaSr7O2ySn8Ki0p0DcMnKQSbMxmcF8Q05EN6HAjfXJngBZ/XEvzqyNcOE\nG4Ah0yYBCHARYx7ljeOi2PkAJENsoRi/XlqiNJbQk574N3JyyJOJRHHCDkpu\nXlby8jUURbQR+yNXjVsfewniy1gSE4XIVqd3ByDvfQpacs9ztgnJLE6cHgEb\nZGPRwbxtjzprOVcUO0xxpXnd4D+cgZ4meEZsJ4PHJnk/mLU4qskGA850GmNd\nix9Iee0YR1IqBEEJxuNqvwoqi6De8E6IYVQGn4QnDIYyLjr3p+Xb3G434AZZ\n9NEg/8jYnZY+FncRBpAmgHKprzOr6uNxaHvNkLU6w7ZdMAP0EDYNUtkKWww7\nk3Fw\r\n=0A4T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCutoBWPPLpJAc5f58udgNgTsYbRbVZqRotSXwc7upIOwIhAL61mdG4ptYuWkRNlgM77fPoI0mAiz575X7Xy8BbxOf3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.cc0aa7a9.0_1626383001624_0.20669852455226279"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.a8fcac45.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lTadvrPrHGY90NIEh0n/vLT28w3U5BePYwOoffeHH31eK8OljEJi4+m5HZgE7BQEb3q0hsNlFxcuGlX/9oJeLQ==","shasum":"19727769844bc11314e8cb1e4ffae2c664f2753d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.a8fcac45.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcLCRA9TVsSAnZWagAAgcYP/12pgdNukKRo1iMlQMGt\nKGzYMBaMlEnr55EiLG5mTDuEtxqV/32kPJdM6v16+hMyi5/NEf48XgoAkvZb\nmAhIfnffDeoAr8TOeFJjp3afJTyTZ++aH6ixgNqoiqeJ0X+1LSoW/MY1Z7Rt\n/qDw0MvAY/WCTzqgr7rxt+RPQnX0dD4t5Wv9DE8tXchIf6xJMRTzHOr7ja7F\nozefpSiJUSeTkB3TxPTA9wLA/dzv5Fjke3RbxD+LvbzMvwyVQOlXwG7jAK9K\n0vvo918FzpkKD56+SA9xo62XmJFMmpXYXVwcHAzdQZfOBKd0Np4Y12yn3NSH\ngJ0xDBb4ZWQFsDNGekr5Qn12IpCGIW39tZhRZWFx5g27GjYKpavq05R2o/Hh\nNn7Lh4rNlzIP5CFZA/uBpkgIjeE+jNhzncibSD6Uoondp1qlChB03U3Vws0l\n+SQnh348hNCRGrQmD7S66xVziMlrMvXSbrLKrY3eKgKZAZg/Hf+pmngSFHQh\nfyQZRbfnQ2+VdRTrrnC5BhwmXicM4OpgZAxCuV0BClRSaKzqOg+lN++nx9a5\ndDuCJ3gBmwFiIyM3IlgKazJeXr+46MSe+1/j+F89VqdprlGIuGgITsDOn4sW\n4+HCArKubznmD5ltXTeOZT+HXbw5ojMnpx8D7UGSh+HZNQFXgvfHAGim/aPG\nKIM3\r\n=LPe0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC/ojjK6LSVe0XwxjpfvX5nkHZgyVaPHeFDl2jhGQr0QIga4dMIadQmDj6Fd0Mia70O1OJTkX+TA6VdOaMbggY/NI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.a8fcac45.0_1626384139277_0.03178768054176917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.3ca580d1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cFbFcG21s7XFzMWiMJirCRWHAi4uGX1vV55MC0aONOJHFLJpkn1bFEYA9ZTrnEb+19CX5oYlSLHqM9QsCZmGzQ==","shasum":"b0ff8bece7b77dea1a6a82bd8679f090a5245ba4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.3ca580d1.0.tgz","fileCount":19,"unpackedSize":74534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LC/CRA9TVsSAnZWagAA8BUP/ieO2ScHUM6QXq7Zt4yn\nxjURL1B0oHQXVXn3UcH2pDh12hE8RCAQ+vDmAnAh3RMZE4C8bbDeACqIz1jw\nu7OYWZh8Eqi4L1gD2kQPiCKmyP8YbsQbuZ1Z2Jd3tp6DG6BQdugY0AASscfp\nqu4+c7O1wgzGTetB6bCQe5oLZX/bT/RGfnQ8FoOLc/8VUL+AyRWty3ytgF+j\nUJSpkKCVb26XVzahfamJJ2FCB2dzFnp0Vr5pwDy3koJu+I8XgCuJPdaUf7IY\nh4UsQKtbTvpW0NCfqvDgZli82ImLjttVpPURSs0wvihiBQe2CIFeN23Hi1JN\neJjazzFCyMrqmjMVXEk3AcYfe75QuSEA/WI3lBA2DyyeSSgHPK/7Crftijl/\ns5TZVcRJVL0jKGyQeT9jagDwI8Bu52nBRj172KODgI0RdBfz4SOmjY1I56sf\nECzul6bil9xf1mIBRCtOtaUkyUnISBa6oA3Li2B5ODIK8o+45PDYlpqyjaEF\nps29rtYrkIEziGxFa4XipZ5U4OTTQBK5mznvI2aOFCdxsFIqoVrvznJvejXJ\njt63gkznj/a2yB4Cc5LMtzqXT8QWHvpsX+JV2YtL2S2siWHhB5QjhpjfqZm/\nT/yZGINpC/80b6LwoN6CXZK5rS9JQq3cwG83bGxLvegW5X4R2apsAt9bcosO\neuwj\r\n=wfau\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjo5FEJJJCYvW6CPzEOipF4/t2d6PPtobEdMAoLGcuRwIhAPfu2zQwd1DRynDQQE+26eKJaixCdzl8/rx03/XFSKRP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.3ca580d1.0_1626386623083_0.02784651315366138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fQzNxp5NsWlBu/UPn2VuJiIs35utzWhrFEJXFqdx7gMbjji7mzne1nJ5y2100POA7ea2mT+BxWsGaZbxfGb7sw==","shasum":"c36f5226b423fc1c74ee2ba0ae0ad0e967b54aef","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.9e41cb2e.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/oCRA9TVsSAnZWagAAYisP/3+NZWz+NpyXopFpgyc9\nAZPPAXyG0P8+HNsvyKrCRMCqT7V1XbnnfT09HR9C0eGAV5PbCzWKEZ3e1e1W\nsjwA+TtSJRjqcuWib/6nUCg1exHiQ+x0v4ZUJOXFJHvHpe+xq/J+A0AZ/4Vw\navSXG9VCxGPk83tvsnx7xXoQyMUMZBgUtmTkyC/OwzHYRZN8bluFlspVSVDK\nndm4Olx9pTLL/KeAJ7ooWzRwx82DHNhBH+8MeudX9kvcXMvGhoRo1Pb+PG1h\noUdc7P0TLYfF9ZUFwj7TOJyhmpgLs1hdQJksZpumDUKWQSb7ttNjgPFf9ANf\n+iHTywhhOUQ+0otCcTuWMv1Nue3tNv3DdwPdDQEY+3Nz9yztrvyAos3H+cj/\n3giYuT3I3ETU9VEuwe0HML7pNWfOTIkKQmFu2xGuHQmoaGa6bYfCa05sR9oe\nPE2fFjWxxlFKJFoFV5PZSuJHo/pCVZbxy4rAGh2eFnBoXNSaA/D3hW7JCXJM\n4YO1hgeOGU5mfBLdw8KtUUk2xPNktsHko9HSrsnIEgtAvnuezsjTCAIwin1b\nTHPkgxQhUUZGk2/n7AkTAI3xm114Ueu48BPnr4iKDgTT66DOzmADXqbtXXkt\nQRQo3GwNC+5Y0C9uscs/LTtWaso4fdfQHjIXxxnViYXU5GCRj8y4/c2D8+Wf\nyjy+\r\n=0XCx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlZz6TfSUKeJI/sf2hC40svduUYrd0EXQpF2EozuPvfgIgO0mE1YXRnlp+rw999uBZGTcW3w3czAcgEJZoqENAQnQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.9e41cb2e.0_1626390504099_0.5121478188262789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.c180db74.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-36agKMdDslyPyQRSUysfRXx6mq8IRs1POwhe4eoZqUL07c2gzoUE/4WUIAl2gDCC5EIM7amdfdKNrcTyezG3Ng==","shasum":"47883c754ba0bb6290716f5297d1652f38d613e6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.c180db74.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDaCRA9TVsSAnZWagAAkzIP/jpeggFD+NYk3ASmzV7y\n0I/TU2+1ZBxIgvnwAMxeDTqNOk8Lrh3Z2hWRYygF/MIoTk8hBI21kwhyKFO8\n7OuqvkSIaFHQhC/n4QMGFfQmbMbl3P8p/SKMOa27/uUwjKe7tBGmF1CwFiC9\nQ+4RGg4LUDq+6FUchRNlnCKipzPm/kuTFYL/yXxu/vZPBZxid2J2GhKDmHqE\nWpXtC33OFFgOtPTYpQghwsBxdh+KsbLWZJgpb7iGDJcqDVh6RTbTqdBZh6RB\nzQMHXkmlJXQ9A+osdGKeiVMw5C0nJ7I2r7e2Vr5vqfau7AMZC6C89420Hqt+\nM4GYLHGDmFCglOcgayOi19ByhiXUAAldq36l2dPKnXAsbQWAYRJrGyBWM2mT\n6kbb89KNOGJWuDjumBKHVuf8SQCYTf/vjNUhU6ISddTnm8oHEApIOhfwwDOw\nq9K9uEhJCVCZY6fj7xGDe3wBRsQTN16hKdg3cruHZaxrU9fVjxLmrqgb6jop\nfypwSalf02OW6NFNkarZYmeHT1q58Mm/gJTCc9EztosjZN8Qt7fB+rCcSStj\nKIamYZm2SkB0D1DJ/ORGAMy7qtdfsNfef0kxkcAcrI7kCtwfeDSafo6AIdui\nYNKuYMz0+jYkn96CgMsZph7ZR27qAxRZZdmLKAY1R9m8vGdmNPzJGB6pw7vc\nH3Cg\r\n=vquu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf6PVl1xV0aYyFR2CRgg/ApKNuF8WntuatKRAjhVBj5gIhAIiVNlQIPpzfi1r4m4VzSM4YVzZMD+oQgRbzyb+/oMW8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.c180db74.0_1626456282283_0.04037083933089303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.0d0a9267.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BF91fYqaCtH9M6AlrxUdAWVjicPPsknsLObgf9olEyMbpvOSayne9hG2ApaEYwr6lz+eoq3B4UY0wd6o3yZy7w==","shasum":"c33c2ccb92b19396e81f578b38cee5c1b1d2da77","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.0d0a9267.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8chnCRA9TVsSAnZWagAAWokP/AtFQbKQZtcYxhRaXPez\nxHSP4XYwgpw1/5eIsVcBpv6CERVIcg3tLobRdQ0nkONUtsEpVvAxojCEDHvZ\npFoUZYPtXeUFXa7Mz+RhyEfC6PKWuD0+K1JRSbhyTDVfYKefqa6HtMsvvbpX\nIxj4ciZ/lo+C4G4SVMcU6BkI/emMX0mn7fZjr/S0vVH9m9ALwZpVkI1xOf5L\nfLSJ8SBd1HwkbU35FNV/tjzF7U2WHaTsPeCGxN5DLCy/W8oHY147N2W+69fp\n7+QdRp1EZF2tlwhbRUyWZLporYKTFEoh3BZBvSA2aQk9kmr0fado4ULj+mua\nHEKlDd4wSlgtiRledOZiUm9wBRXwa/R44EQ/PzSI4ONJS99h/nDIPB9rvSQ+\nmJ5bRDmoRiDR1a8zMGs+2y8a9GP3u3yzS5NAakf6CcYBoQ+FHQONGZJ8081U\n4pvyofk6v0NlgVgCOOJyXBHaWfcGG/u36+jpmf4YQfsAApb3Hfbra11UqC6r\ncx9KxiVteH9S+ftMbA5edxdal+E+zQPbP0xsatYKz8SBfxh50TDU3Ws24Uie\nyiaz6Mpcg0MDFDbbE/OahkBUaZPd+QRJt7aIEhQvLwc73ZPN37ffLXB6j7Fs\n+v3SSkLjOH53vokT3bcoEFj/HjYWUQXWlVFaaaiEzrgZm+5L5VtcvX4n46t4\nNAHh\r\n=9Dgb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPrjx5UAcil1/l22XV7U2TdKx8p/xrxkk27Tvle4CFQwIhAOqJ2BnfYanTF/Jz9/u+ZCePBvsCsFgeGJziZsFr9gYB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.0d0a9267.0_1626458215421_0.030494418792647915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.d234ec3f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3QjaMWlR8Wy2YzZuEUmlqxVAbswHPZi7PoRkoMSt5A3fSZ6/sbL+WlK+yUD+47w30hX8IpPdyVl/NZIurTPZdg==","shasum":"9b65a06d9451b1cff2b4874623034f95aeedf426","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.d234ec3f.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8criCRA9TVsSAnZWagAAyJMP/1eIaVnvU4iH0nIsYQEE\nLt7yzOfpQG352Rs6jhzlvXBc4Md9a+cn8vMC+9oo7LktsKJ/UuzYvMC46dDB\ntKJV//5Yzq3LdPXEMOsmocmL7oajveoS6L+8kw4qayJW//vbO71etJzXYGxj\nf3NgrV3fc2dzkL046jdOf3gyJlb2Lf0+L4efdd/zELkFczn9QVYcIMc9Vzol\nNjyAcPx8M7o3eeNURbRviWE6Y+ZSUI7odhardsDIibDRLmSc2tO8DnCJKNzo\ncRss1p8ud/lK/htvuHjS3mbOpE0XOGUtb7/17hnSmiNHsdCOekeePERAaEsT\ngwPmsRKrwno6L70oMbQ2E5ZjooF24qcZDqE58E5eBb46cmJdacuJeKTc+xRk\nzX6NjORsaZyjDaE+Du6Gzco1xhpkWI/jCiBl80/B/Vvjf9q2SdacWNNrLOOs\nfYRj8r7dShW8SgthEdUkDUxiu8rkLomGDFcYeHOMFZySUx0qBfGz+2VaWZ0g\nA9OaczfuXBYnuLzNouiThXUE7nB5n/08YzZTKDRWxIXS1BFsrODtCdJ3yLPl\n5O2weUoNHy/HIeILq4ll2ICSqU5ePYejawknO9QTmKLDhGtE1CJI/Zden44D\nHKx+gv5fn2prc3vry2MX8H/vpJTUFenZbw5NvV/LveVfiD0rGnZM/hqsC3pp\nTWdw\r\n=XXvP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWEYmwCAJ4/+nqsl1KySoxmQOj70zGG2DSCXVPx4FGcAIhAJ15P9WPuSIQhlbhsnhs++9ZYcyyTWwTo1LfUnpSfJmK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.d234ec3f.0_1626458850575_0.7111020055006114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9fVrvci0gUofM5F6dOOVOX5fqCQPDkSFaw7NNLlW9uCYxc8d+ZmjOZzhJioEtPThCPrrLmixLz0XSBgm/oWQBw==","shasum":"a1aaddaf84c057b8f6cb3fc73671ea56c4e0d385","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYUCRA9TVsSAnZWagAAIQkQAI6HZtFJk+LUbEQa3jBO\nQ8MqjzZVlgcgPYvk/GAI8hq/t9mafOL1L623mJEhY2UfP7sM0HK+XooFRW5Y\nGt84bvjaskQ3ABQmes/KffTb/4kaJ6k7h8D9rhBXd5K5SaqCD1AYW+mibfQE\nih0Jul/o85LNasnQjxWZdp41xp+EuIBsTbDTz9a2nTHpYK/NUttfvBMeD4Vq\nyLfZwciz8aJ0S1kHJMnoK83yLT+ZtGaPNUIc72vbkPH9uhEDGVCOxR9ekZbs\nP7QWnOuef9x5HPn7WKVteVsFivBNRSU8va6EpN38STelt2behERUFJsUnSq2\nOU3CrHuwmAQYrJbPuYw60L+DEuWtXcSRlc6A9e3v2G4btc0LVsW6YJO4wsXn\n0Ci/HFwPgtnLSTS0SfQp8aQnMrIoAXCD5Lg0CgZXgBF+RcKd7hLvRZ8IhRAt\nqRvtGRRTdw0/U3T7GFuxA2jwM3DfkO4opDIhFsM/yFcqCYU98pdSJzQHkZA3\nBk+mJ37WDTbK1v2jRxb7LgK/DHdoPfhDtsVkaUBRl9x4JjxyWNVjjyIR5aFw\nMDNXFhl2s5oAr5D7lO8UKWw7SJ8P6fIApyQp4Yw7EXKP13AqH7cMTjTyjSnJ\nqFc9e1Af7L7pVSTEJdiQeodkz9rbIE4wRnDgBDCJX0UotI4odPFcHOPOImMS\nhWz1\r\n=PlW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDihRtzw/JuUWTP4Snxhga3nH9+iGaUf4wkUVrKvd0rFAiEAtho6GeWBaRGttjq0rEeoQym+mK0MMC8twTJpaxUciU4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.5cd4bcdb.0_1626469908647_0.35121296850312245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.2b133cb2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GOkSN6p0cMfYnfD4CV8O6dJLDE6MDFwclWlEhm4CsW5xXyL2HCVXmofuEUK51hTttb8gZ05hYLpxGFgPjL6UTA==","shasum":"459e1765ba02d17bb654119275a0132c4bde0e84","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.2b133cb2.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLYCRA9TVsSAnZWagAApSUP+wUcIysKJ3BZgb6012ri\n2DxEHtixBKej9fXexlG5fR8ihJYxtbrP7/EUTmdjCEcNstYIKUWU1BVmffhV\nAGHIIIQ83sbTccBPH7rXIXOo93JHJIWzL4ErI5FcKhBonNqHbl29HEADNtLq\nh0SiJBX+DksDTfl2gYMIqEO+u7xXO4h4i6KC6mKL1KURNgELW4ZdieZ4KwGu\nj+Ma39bglbigOC+fVrpgMSA40yptiavq811j/UFdBp/iHWqIZb1/tn5TgMUG\nkkV6KzZremOyB1puWo4t4mJK90qTBy6LM1s4i4yoOwhMkd8CwF35xJIN1O/E\nPY4si1xTil2fAOYLSbGais1OaUn4pRYiAynZjeRt5BzZbmbc05qwdDDMGY/5\nSG96d0qJdW+DoOyoxDPXccn/9hkBrnx25IaMIGuEHr6Sy3BcbXPDHcbw5Er5\nld1eWqBNKLzoxXT1ng0dhsxUp2QIwc9q0S4IUBNy4JsrWzVcfK3PdxzY9SXE\n6MfrMmVJLdbA935zsd4dXMl1VK1744zamXwLFUivBcfU35ehfL3o8N7v2UuP\nsSODjDvNY/ucziJZBNMRlIwCZRoXL2RtqJbGGqRpJTUVBpC8iFJZ7puMyOM2\npLUMB2mSusHaSPMZGdcl1KL+4p7aHx4/Fdv8vr+FLyUz1Q2xp+lMDih+SUmG\nknB/\r\n=xyqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBgEM1y9jw9E9AIEYOmbp32wBHlNefxoK8H+jiRJxh/AIgeuzdxRAdfUXHumy3Db2sFsJPF6lONvx/wjgNwEQbdGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.2b133cb2.0_1626473176683_0.6989232249735609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.ae4f422b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/wOc0ELTd+c7LH95CHnRMaZXRSC3FSqHcxEtq1+3vh52biKdb/YhvRNq0EP9LD2l+KTLPzK/BFAaNdegi9Fm3w==","shasum":"401a6ccf91804638710d3835b4ab3963fc61b7cd","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.ae4f422b.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwJCRA9TVsSAnZWagAAJZMQAJHwAmMg2o0WKqIKTxpi\nY97dud2i9Cj3x0UUN7BqD2mhsrpmaavL1oloM7CFx6boqSoD5t+MSUW9mQbH\naAr0m5cL9Z5uqPsC/FWuLH3qF/5kImikSeHiq/utOGaiOGeQHoRX0IrpAXwp\nSYf2aJAlhqJ/Dj7bnxqcguGCqKyWU75krSrrUaBwax5RYFwVsuCC3DJti1l5\nAxV5p9fU/3wJCqCqB19yf9wvoFLkKSzRDDVinqi4aVnr7By+w1jiY99z/hVd\n5McxRd3+omzVF5s+13QJILWGFCQqgve9yWz9bBvr53GFnCc8VE2frKmvGTUC\ngILKPehq4KtFXTKXa1iJRHbeI5tcaHwCkjZlOnYleM+6i8AuBWWcxKePJUkt\nNYRj34CgnzoWJOujOh6kutc2yyNHpM1kN2htKCSF9N8Z5ZDAZd4bTm1kkjT1\nSUQuEBKbb3lTkpVvP1bnDOYDVieIcmH6bjYQlxhU3cYhx9wsT+q7+XsJ8YnG\nHNqoopRuxl5+Oatb1W2U8s5Xfe48dF0hTKdkUcvhxQGAwXgN3otyIT/JZDb3\nz7Fbaa/73KU+oDupFSPniIOOtvTknUq2zWto0vRYmYlQ3I9TBFGHBxN1KJig\nm87nRDRjmtuLBDEs8VzHT4L2bRm4RMgxEj3Co80cpdRO1+zkl9zo9NRiVjAQ\nynlX\r\n=/Nba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRUhMGbUc1T6VlmkXxR2emZdoI2TeMmviu+GKRrh4FiwIhAPMgJdF9M8Wp+TmiPy36dhe0RN+tq3VEPcCwDqJ24VxK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.ae4f422b.0_1626479625765_0.8072725425036718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.90ff8057.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9X/eNKMvYaJFOu8a94MdA643J5rdR/ZQgxPhfljIURwfbwXtNALgS7OiNCsMe2Jb+lHIZng1Qy6qBcnLogjJkQ==","shasum":"824bf8b8a25efee60c9c44f0517be4e2ec28d4a5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.90ff8057.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcPCRA9TVsSAnZWagAAngwP/jCWEvhmV/uyQbVxu4Xf\nqpfJgdO2AW9tTuWblTkVlBasj1mYpNqOIP7qgjWhQq2JTN7yOnD918jYIUjG\nLnckRj5twOCBhdmNJyJzpSIi0xk2ZmCtj+JywiI5XCmhe2rrwmMGaJ7ynxak\nnPgoC0+qU9lD/CUft1IBHZw/+dXx2+gB9c0zjiLicNEsBcTUwiStuj2ln5Ap\nROsZm/LSGJenahYiZTjg6T2nY5+16piPZcoSLhCf6vwkVv9O7UMrrCtv7VzZ\n9zP5KFx+P7AMJbxynWR3XiyMJL5EIPJCQLHYGQhcORkpCDDevTzs3XgnG1b1\niIL5O63/YSaqyUBiDcvEEgOcOyUHvN2moHuXOv9hWgBqahGiQOIOqr7oXuHf\n/zzkN5Q5E9bjMYXbvW6tVumo4+clF+73m4Y2Ah2+VOqa+S2yGqAj5zXTHBfI\nzhjdjtYOhJNGZh9PLHCJma0t7xotTF7P3oZeSeZqucBfbpXYVLSLJqFWlM3h\n+7PVPt+LwYCimawBNuvV1jDjuoLFY2/yxYqtvW+0V/zclEJIKd0NaxaN5+gZ\nx8Y3HvU+m3jJ0yYin/lz2Cm8MXBal0QPcCa5ey/TeQy3m7+zs9lteMDaJ2GG\nuR/fokpXNUnow1SNg+sV5juzyKh9QYqMfXbKhdrAhm551kmdcvnKZOioFIZT\nJjti\r\n=OU5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1oQusF+ncSxQIIhg3pn6eHD3UHK1n5V7W/6bNR/J8XwIhAPgz8BVTW9w4WrlQTlE9U9rz6RZ1qSKR7qCWzzVj3tJO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.90ff8057.0_1626703631041_0.5197207920756088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zW5/qfVXnIZQ/2SNzo0zOApnUaZfsDrpHzoU7rFMlPeQ/AFV/fLx1A/VbGgKU1oAtEpk8tsqVE6iH9flGNoZmg==","shasum":"66ea97449264e224c73feb1bf2c047a1721a1d07","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.dd7b75d1.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btbCRA9TVsSAnZWagAABo0P/0Ymbg87YWNvrjcR3Ckn\nGaNLEnynZqwR9XvGV3u4Kb6ZUIxAiYvgHWtlIM/tEffW8x2lyDoC2CvNez1J\nbVmJVuVoJHmuB365PWIGdCZTUZsYy+weoKEtI5jamLCNC5p1Fiyyu/PKDc6M\nSxm3FU7pFgPpnQbmsCSKAWzUtnMtUfWhStCIp/1jaZ4Y7mXR1CkDRR+/FZlg\nwaEeR9UPbytB0zwW0qB+dwPJPg9wY9pZ+W2hDUeedz/aPGaZU0k6mErDsj13\nuWd3QJGU0bG+3R0BJ2yMa2EwZNXqR+JTgSL+UlbFEt9RdodTCDo9/zl/d+e5\nKuNqcfRSbQX5UexJ+J9Lmjwbh9+UtYjm0gAF5BSjbKPDG0ocV72eh9DDciyX\nTWPfpVW+SOqI1xNBx7th6UpIQqOpJ3kN4hIR+dV3nwdLJ9/H7AUE7WbPTBsv\n/6S6ZfvlRppH67DpiL18AedzkiuQK5h8vRjKVwENftWmdNk/QAYfMpHOgJt4\nHQGZAQbKvdUiVrKt2oEYeTVZb/OmOsyN7Wx1jmsECMWIsmwqnMDR0vjxsZV5\nzwMKrc6Tz6Gb3hEiIiUZqK085vfclAqWKau8D4d1jSbq4IbpkYr5JzZWooy1\nCdnm90A7NJzvIF401Ls9MXoRZgyF+Ikth0KGTVL6Ye5rXsTZc917QF2TaGGV\nmKSk\r\n=UicT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnLTM6sKXO2UGgzpBzRWDSwAu4dUz/oFLy6ZVgQ7GxTAiAUS1zfIlZ882LknYePNp062SefYJ1Gi921OnSgnrI54g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.dd7b75d1.0_1626717018798_0.39997229191503303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.104debd5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mPR3QH3kgYn9RTTVHuCakEAlnsWsyff/lgAkus7LYzqh1Mr7axjm1NPxzz2j4Myemq16E6ExRF5RxIoNSUX/yA==","shasum":"60492388f2067f2fe3bad09d46a140d8a13f62b0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.104debd5.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJdCRA9TVsSAnZWagAAab8P/AhP8J0iH5SCcqE3zOko\nBlz8GWdnF86vLSmq6Eo44LsU31ckkBMcnZNfXNDjbeQI0hLfabxdnLffaKYW\nfuOOObKVFnDEBjJzVyk9ZaB2rC1bMAiyjG5jVoeiF3NSSdX/Q3UWsYwXqiBN\ncbSd60j/JaT0GorqE1B3MUOJ2iOSOYB4tovwthFoA1vFI4oBm+AT/tp+m+z7\n2I+Jilt5S/8uyzev0CX9nF3xntDRLe32qK2qS+6kI3jMTIt2ppHS9tP3kPSQ\n+2hU8zVk9xnQbjRsJ+27VHhbwAXlIu4yGDNFYmg68Mt+CUQsVInSjpjmC9LW\n4fw/r5FE10SbWqHDuSK34+bQQoWkjJ6EIkBE4s+8HQTpt1BdfSsLon/uye7A\nTezGNYWPioeNwItRxGp2q9CcT+bKjHEsnmF1XBCnDaecQKXBsL8Y1XaKmv4n\n/TW6/eUXtc7yAn4Mx1W0aH6CpNUTgm7zBKesc3w0iJQFoQxbSgOQIdesDW6H\nh7wQD7CAwLAQ+XCAi1/p3LcfYLYcXOuT5LJmFde5WGNwpOWSwSVzbx/HNcjI\nItQRzQwKsNvJutw66REm5p4I70pMS6vAKEd5GUaDyMWVM2DfBVUcnG/V9nUF\nB0yWQHhwN+Zz5tAjAn42erDJuH65fw3ogaKu0kljYk+FZ8K6R/DMvf8Q5Z9b\nEUw7\r\n=vFIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0+FmpJ/QAQeQutT221tO3aKWM6TcxwKminTgJlr1DqQIhAN4sxad6FrN3Pievsl0M9DXg0euutWAdGpcOwVOPDnQ1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.104debd5.0_1626735196914_0.5277506043543922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.4612705d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ar19whWvHsSJ5Rj3TJMaNyIo/+NfPb1Ns40ZXdqPPuouVBmkaBcwVqeaPONHfd3MxkrysjAz2WbtA4DkugCjaQ==","shasum":"6b2ad741804409a7182923d7ef1a587129ca69d2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.4612705d.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQFCRA9TVsSAnZWagAAFpkQAJb4DsW71Bfgx9n/0pby\n2PElYj33tpXh7tno/8YG5Fuxo27vBajZJU58xkmHAuhJ35YwHr4vXgVYgtuJ\n9R0I3EEpsRAWJmd3W2Z6pGiUrpP9ZXxN+D1zV5ncZu0NNDaVcajYoKVWFJ2u\nPMrnGE5OSmKOXg99KhW6gNo9CputmrrTpgYcQBbn/wSxs7BipJ+y+YFgMRX2\nw4Asz+HiBivrIerodi8fFTz7lpnHC0TzR0kl7Db+sMX+Ytz6rruATgx+j730\ncoIetqJ1XlmhFbHF1r9S/dNagryFv+cdMtoRnNOV4kioF6poFaWbsc33Nzni\n0Y0lPZp+GMn3JJ6lCMz9tvmUcVqTbXqh4qGWvnhw0bNAhshwMKus1u+Jd8WL\n4ptKV3nrioaHZqz4NWeTGzSTRIEQTQmxPv2ifcXy7V36sGXj7M1mE5oxQnZw\nm1YytGBSthi0V3OVNS0/P8PpTiK10rPqJOWMY4oVMC2qWQEzrCCZYIHMEoLO\nrzyggAtpSh57LdI5+ILVxMx55GINokEkNC7QHSHBjSJlGq02S4opwP79OLjl\nYFGspEn0w1WPhR2fV42b/0vJzg4q0y/jz4aZm9bfW6BQYXADXzVOAViIwpzq\nIJzpiglRjKSFwMO3zdBtqLdsnEh+gmMBX38cErM3VIwwK8ExN26RYrGIfAKf\nukFS\r\n=oqoC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7UOcskN5EW/pYSIyMmmvenMAAIfrLFf9wcep5oloc0AiA0o5rK/JyDokQnkRl/8GaxvDmj8qPfULm63+dJzWdlPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.4612705d.0_1626797061029_0.2750032482212217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.b36502a2.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/ripple":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SpGBa/R0WCG3aW0QWG2MkixlP9j/HdcEDXfg7EdrxxdC+BnHcOqnmLxV03Y1j6LOAGbys0BsSYvB5bq9DOefkA==","shasum":"4610531bc5d5b428f8c4c9fe53ff84e659d84af8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.b36502a2.0.tgz","fileCount":19,"unpackedSize":75265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDpCRA9TVsSAnZWagAABv8P/0RAxvQyHwiAl187neXn\nu88IBRQiO71RcVWbvbN1oXFjpRnmMesQzXkqzELHEISK1RxLjl9+xvenNeI8\npYzMI3oLkTzpxVcEM05VkM+4TUI9jyzt9nEfyfNUbcy4gO48j+YD6OjdHWzY\nPFSgFsh5AvnyUcTk1ohXoCzNLRneodq6LO3tbB6mdZG/tEeERRg1tukJ+4cp\nm/LqaDVZhRZ93c3d+SRXzedUnR0LN4Cyc2Oa4E5NUanwFUJdstETCdFBqj12\noPkdwfiiX3f58EHkZZfF/LWg6dMqsyOyqYQLvBNVqgh+Lv4nRdazfhmVrE0W\nyiGh2hK/pLOwZwzV19Yf5eCkVPoCCVL8tDnSzDP3CaIKAOpR4/xR60CbjtDC\nvGWqglcD8KzMQki318a8nnWFzruQD7KfBKK1Mnhe+Tpd4x2jyAStuhQznTB8\nOV494I6kX/wC2pzZq6KD+uvUMy/g26cbw707eyLLy9Fmq57EjWYzl8B0pkT0\n8V2kEPZcAFteGu5rdgn1GGHr44Uyton9QV9hkvo0aFzz1gTMP2xDmZHoY3iq\nmNfW4xU9Hgq1wdInKg6fIacPOBkXh78xQCznxl3dtOZBY///r8IMkJv75yCr\nv6Td0CcLdQ9mCw0pdjIag3UiPRWl/vakpbvK0Bw3e+sRZg1G0uNillw69aan\nQRLu\r\n=bQFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLVe3c7W/LhSYgICRA/I39Z7ZUMNOE+yOYQ4e/gG787AIhAKXsT7j1qcFxEpCKjo2eon0e6O6vmVqmfuvUI5jCzShm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.b36502a2.0_1626906857304_0.24699583942622638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.2c392ab3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/ripple":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p5inBYeSHmV92iJmJTmgqDt+ggAfXPHWxcvE+BOY94vm8fXC8Nzy2aNA0UOmfIQqT/4hc4P5Hne6EkXhnCh9ig==","shasum":"3a3d195a4ed8ddcfe8a2ac500701f07de9957448","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.2c392ab3.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YY1CRA9TVsSAnZWagAADBUP/2Ulawcv19uIw2ZWfaHa\n58hRKInfv4mfb3EQ22+x3art/7RhDJtwV4/FC2jyM5cpeikuzIxnSjLpNYEg\n/6kLto3chb+C4ZldNJRcyWuEZPZENZJ/pF5G1a+eqE6ytmRdoI/AU2agVWQM\nPgP3joy7F2DsJ7GxhJBpRiKbxUwS674aWf1eXOPco84YWzE0Ut+vEIqmUolD\nZPFHIonBsXOiFU2A/wVKBCn3T2nSnCy4iu0HZB25Y4nsFaXx/4HYwqJ/VF+3\n5G17GUDLrK0uMJHJ04bgLQCnVM7UJK3wQGKogwfFNAvffX/RySpM2uyrU3rs\nZy59s/DygHZDMwU1SBSLpmfi8+Kc+RnAJQeuMrRSnatw0J2CfJbo7iEMkaJ/\nPQN0dXBTcy6Qq0OzSoVC8kUUbcwL57qqTKwNqH2yV/pmhEJH1aFUbTtX6EsZ\nE/PX9OUuTXNXTrTxcDKr/amIA0JvZPojuW+doAkotZw8J+69gs4ix+Kb7QVx\nsXbvEDgsXqPiWQh+IiFRP0Cj+vRtDGWho5ZWkSwj4+urTCm1kZ4wgJr5SA34\nlxPmGgcVOR3EZN5ROInxpkqG0DrXNKmLWcbtMvcGfWROkCDCj6aQ2P/6l3dg\nN3GmQWIk5oE/JE8+xomU+zPkaqsb/4kmLt8YFZdfbCzCWYsYQwWxOrHAT5tv\n5IkU\r\n=YIsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5IxX6vUCGwQzLkGIHVl8CLjCCC8lcQk9T8zOjqHi8IgIgC0aTR86cYSn3kERAAaVOsx9DK3o3g64ntPnR+NRSwSE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.2c392ab3.0_1626965557019_0.34731730753249823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.e8bac95a.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/ripple":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4OzgWZeaEWD6fNhPw2CvDi8aD6FRdELSrNay0xjl4O/CdDACI4l6GFx6tVNBGa35Gyv0y8sb94EUlbWMr3VaFA==","shasum":"d0ea5e8c7c862fd6976f3609e5e9035ad8b15307","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.e8bac95a.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b52CRA9TVsSAnZWagAAlt8P+weI1ZhMUGVPo3+JkQ4L\n6Mm150+hxbwFAxhzHoi98rErHpeJgs1MY2o1ElFpWJ05Jn6M36KY4lvFN8Kt\n8DltEWLvQ9QWziZsWy2Hc/7bpM2xU3d1US9/1gxRCeGH6xruwDL1jrBZ+eJv\n8/85VIUtoopomuzSj4k8n6F24n2fa90TUNLMC+0H/zQjxJG/Kwbla0ajU6ww\nPDVle4k8PPTN3AxEg6PUi0Aou/+AM5RBwKvb5LvL/LIxel/AErf277/fgyq7\nR6y0EF+0M13h1NtxhFF09Sim7e9lWPKoWrq/wYt4pBmTSXgChHl3L4TApJMC\nJhWQ9taMB4kTMY5Ul5dd4RY1mkdI1PtLeeeqaSX9GuoPCCL06h11q5t2svF0\nfxKcy3J0lUVs/FNNQopXuDsBkKut+5SgWyczpHgIdhF7fCkhZT/a2qW+eQSg\nj/ATUakf2dnTHx716Ag7zKtq6cA3Pzq9Si7XbUCDmgPyc0ruiRnHd6kJ1osD\nMBbjGHm0uybiGELezxTErStC7DYw+h34z8KJln77Iqzx2GSxHoDt+VzQ9s2T\ngNl9EhoPNlfBiqQXvdFqWQjdOLjjUNvphRuRTxQ2yHa0oQB5rNzYwJn4+Y0v\naGVaEwHdNypCMzqbHc/PsU3DYgql7QMTXj/QffzNR+0qTWjaYqSvc6Z//xkZ\nPd/G\r\n=qNST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqWsz9FKbKUVnV/0cSW37clE1kWGaRgPzoCRYANA8h1AIhAJXyEMJk7qdSobRGY2hWDs/1uczQt2NH1HVrOKwwJEvM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.e8bac95a.0_1626979957871_0.7082394897614135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.38f29f8f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vy07lcQAcs2XS0BvISIRSwklqhhaNNDiYUp6kVcg1gE4BHMtDrfcMs4czksRmK39GmEAz16mswLrs122zD7yzA==","shasum":"94a08ea4baebd5cec703bd7755b20f84b0f3967f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.38f29f8f.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdRCRA9TVsSAnZWagAA9V4P/3qX3CjMTJBzend5KR+x\n0AatZxJeyI4SwZj2ZpymfNTFJJExUhTfFv1a039buDKdAcysKYlb7E39Vkw0\neZIoUcQMFyfpfi4UslaL+gjQppqe/6PlD+9WQbRU1YWH4yPKHuq0hsye6ZGn\nC5wwsVqPiGBr0pjTcKT4W3R91l3ugzN6k+Z4cUdrS28GfLPStth5hA48zx2y\nu9OzS5ioo8MA0K2VvYMeDK2luie+jig7liUWsei5otNHdwOOsPadlaa7iMT6\nJaQcc/8gW8SOI0fNv66LL1TdmbGEAY6bezSv3d3tBw97BNkbHsy6SdDDtzbt\nS67ueHHkS4pW5wVyFW8gYTBI2M/1FmmuF83flM6CFODUcd5/X6GGh4gP7Cg4\nlQj/uV7Lu59n4Gk3B+mc1maiAFTBERFmIQFNjbfYilVIerb9B31ltS7SAJCg\noPxDuhTmfKYmQYlD1QKLaNU+dZsIStMWFwqqPuSVmJDGUj29DoY91IujGxG8\nWjEMdlPaYuSFS92WHOP+lUOkZvRlFuf6b3kDDOaCtfYe6mqNTxrHAyBN8LF/\ns3ptm2p9aAUU7hA59kNPctajLxT2fsLOGb30r311FtbLIqBT8bxfeR5K98PR\n31YpaVQK5m2XM2kMfgeCeyEaeS348JmCvJCwfhY8veM4l+Q9UE8DCr4gznQb\nUsmx\r\n=3BgL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEjXdmvQBuGrZHKMy3FfrcglBXyM2KoDtxc9PucH05rwIhAPLuUHqKrDSwyUH5x7RkapkXJE1eFB3sy/K1g1n+A7f/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.38f29f8f.0_1627064145036_0.6749426515575738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.e0693475.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pwxBtV6UcnbcxEvr07gSMQtCWgERG5Jwb3EYMzMuTxHQQkLRuqaD+VkSgfBN4PiE3/YFAcEvu2YQXPgC4s0HHg==","shasum":"e2efc7ab33075ddc9ab18790bfd9ad6e56f5f67d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.e0693475.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xC6CRA9TVsSAnZWagAA6YAP/0G3lDXlnFXalUyJnyhT\nSR9K5ep1L4F8PmH1tQq1kymnRp+wCCANrnd+JS/gm989YtJ0sqUTROeKngCv\nPkQQmGnt9yI61RU6cBppZfyrN2LVAMPXWeyqAmK6RWLN8H0Z8zN79d2k02Sn\nYTWyRIKfBTV+CcspsjoJJ3hIM0rl3b1c+7ObcZldnKbp3DhdHuxBlrbGlV9j\nYpnuL5YnY9qA33IlIHNAMqYssRzph/m4n8Yq9vbt6tU4lT3MuS9A72RwfEWx\n0EpztzMpylmEvpy1lR3CcYqRRv+B+vbmnxczPHlUVgumND91fSfzYu0RJ4mu\nQ15wryTDQ1WoT4oIeUE0gN/ixlr68anMUvDXuoYFDBa/646QGs45TsQ/j7O3\nUkp226yA8xjP04iO+SPyrE2OTwO7CYUlHkH4JPSN6eoRAyu8Zy20422h2dEJ\nqat9nSuk4JtXJ7knaV4YqLaATIQzAd5Sn8IPnYpdQU5DjD2LvsQf2kFCHb9+\nB7nznNXNAhE4Aj81GjQBGe8SzXMHfe7shMFqhu3+XVS7PyXe/iT0yTgy7skn\nW9IbIrRV16pFonKW8H72twdNKEPOH8BcUrUT6Hy0idnxBJukmmd/HxNW8G6m\nZUEkYQiLxSF+9XEKZeuEiXvb24Q8VzamdnMmfyFDI0f2cnvezAMm9QE+/r8c\nWQCv\r\n=/dAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmy6jduygrIWi9ipUnxtJfrv05ntrEH8dpYTjs7kboMAiB/2EZ5InoipiqtWQiysMEvRfMInHzG8/STmO8QXh5FUw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.e0693475.0_1627066553905_0.4151649889373672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.d595e030.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jTj4eqUuQ7CRj1kfaYFM86X+NGhynHQ540k9qih/AnthvGMz0L5vpyw+OwvLdq/gpb1Sc21y9ULTPDJd3n7tUA==","shasum":"993794ba21f0be2ce2e9cd40ec7c4c1653e96ec0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.d595e030.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywoCRA9TVsSAnZWagAAyAYQAJBg5z3aMil6QwG2QT7d\n9JQGdNFcqLbl5IYYCPb2EzB+PJDzR+Ezfcq3AykUwCJsNpAPZP4vwH5t95v6\n0T59WSDyTSNIQIYJmk1hOe6A5utzJI+0cZy3fATKviWxQ6nJPu5MzbPITJpU\nb/iNUrmhFH6u46ahlA6TRpH0nrrobvUZRMIduIpSZef/nIUk4Wv+x0S3DdZ/\nlD4qkvRoyuzYYem4rE/guKKs6qtxfgWNDATEoP08GP/2dwubCsqlxqtBEx9q\nGVkbZctMcTOik6V4zGLIPpIVjQMBh3vmrprQqjH2U2kahNxxGQzayNV69SC6\nmxxG5KYvktJyrlh6LRb0zxLkxVsugGCVcuas7hP86x7YqC1dLEsnzVh3p+2l\n9Jriy3S5hZCzzHHse310+VLt8dx71QcF0hT4fXSh6TsrA6k3hUbbw08e3eAe\nzztZSxXd60LpA1ihIQyZtS1w6yCzBR75ovY90UgEDVH+BNqZA4i8phJtnhWX\n9qqOzw6ZpFS/RN/GkKFOFO7Xa+xBjgzSsrgXfwxMEleW/Jn8bUVdsmbpJwl+\nmC1RFz04IyPrj7kcNFFEmuW1yTIrFH9jA6WK9LhUI4TeslV4YzKB4zmpMC/S\nfAyIsjXB5kSKvW7ZCF/RbBX60HDWoAnAuKx64UFWx1n8Dx8x0CieqCGnUfl3\ncE8x\r\n=jh8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQQAyeDur7oXodiiZxVa5mNkVaoV2a8zpyBBq0YpvExAiBKn8rlDmark7b+Vh8RcVti7rnJ5YSXAwFOFJ+4G/1JsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.d595e030.0_1627073576188_0.5197786514925571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.fe7cca31.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HPlipoCL5uEPuwniIDZP+DkjWG47sJUiY9rmt9AcG71Q2HJSiVIS+5Q/iq7w2KArqyYPJmjWQcZrkVSbvBM4aw==","shasum":"7f2a515f388ea6ef68a708d7e82422098e2c3c48","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.fe7cca31.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsPCRA9TVsSAnZWagAA0oQQAJu717htnKnDcTHe/tsR\n1ldDa1jos6N/nmpqB1F5ZKjmtr5nxkFD2Wua7zJCAyiK0T/qqLPjPSVvL7We\nUAXt5uDcJmulfMcqLX672N6QmTenwuLaa8nnVOAlTzre4DsiSJn8a8vThojm\nLSzzRW0GPFjyycsFgfRK3gbLI0/LLXYm1c0+p7oUiclKuCT67Wfq/wXw75dQ\nDcoc7vggfhnnpKhvviBPfSSuCsIQ+v7Cnxy/eSfsGdeHKBYj/pHMT7ooEHup\neiKGWHNVWBs3fJMzE/vcjHHKb+GkdzzzFiKu9yweS6CbgW5DS7WyD5ig12TH\neqpOo4V6BhZY5MO0AFm2jspLAZZ3d9AL4TQq2367uIgS5YfI9EMnUQNjqt2D\nprZFYI5aT92MyFTX52Ekb4GJ/7tqy8PTHiVmleZpCQUyit/OJAblNypkyeFt\n7JRUuSaydV6l+Q9TuJ0wGXC5suUfhD0ljb4SjjrFEruEfgM7TFDKbwBGxeWa\nN9wjvIqEY/rE7T8EBE3aHNJiu6YHD8v38PzqapZKoPMgslITVXjN5qPy3qUP\nNRPoB5wHkC/TcHIxKWA2E63RAdDhFqMuVKZ0ViPnREZgBoLI6fKWOaOOSTE8\nZbVpqasjLzcKt1gGn00PMaPiJt2vmRDrEdx/OMLdWyiaEORwlirnW04OMjdp\nyj1j\r\n=oMTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQutHuh5T26gLBI11ow2x084uXiTTL9tJ0/WFx4GdHPAIhAP45g1HhDouZtuXc5Yx4YuSXWcrHGHvEPlnD/EkZca96"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.fe7cca31.0_1627077391790_0.9395143696283148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.fd9da483.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BM/+kGXvSPEpcOI88DA07l9e6TZ50iE1MWRHQk2Laiy4waQyv592zfoAxvfBAtrRPrkVa13ju0251+6vYjXvWw==","shasum":"b044b68447eb696659ddd6f24b06017cd14354fc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.fd9da483.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygRCRA9TVsSAnZWagAAoDkP/0oNh6d4GE0/imAtVlFa\nUcX8pwRJQ7mhtB0vVHjRbKVjNPR4Yo7PT26vJsTdPYoMFQXLJLBkCAGtKU0S\n5T3flRr14y8vymu7S/5GX10WKZWpbbCALNoQFfocJmOr7WYL16xDpzdFnrxU\nxbyIT22upwRAS5joTDQQ/WNX6O1qfJIDn/PRuX8s3ioo0GFbsXp/M/Dofe/p\nR7C7GU5NcGuUdwPfHn2oua+J8N58C6IVdCG58zrtq63yQHoqivMu8Yy6wiOV\nAUlwJF3EvAS7O/EY7N1IhkzD+mqYHt9X2t4EV8jqyi2VIibI4c7YkcZ6zblh\nkJrniPc5JFZ8+hsFO9ywAA7mh9dk8mDuHNSXkmxntczg/Ar1d+u9tqB9Tenb\nAAhhlii7b3jCr/EVaZAiHAf4/M24+GpjXm/5PDLwdYFl33SFL01NDR+lBedL\nBqmulY5RaBiiksMFwfegZW3SMXMpK/cq3SB3yamXkMyCCLWZKXSdWpWCaL5J\nbHoqIqPXdp5BQ3KKW4cNhB26JzKbfUoP5xEMi9mRXXssAMplDL/h6B891tT5\nH56Lt5SrBGZ0els2/D2V80fusfpuJEvP0ufe7dOCzFW3YgdWcjydwTukrBC7\nARcUVFNpmyOlTWfyL2687QqaKLYk76mf13hG+mvApl9dmKYVog+HNEIm2zNm\nmAUD\r\n=rFNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbElF3QM1JCrkil6n56tONPqQIvQRpDS7pa3+FV9o8NAiBd9X/QsTPO0/1fyj7I/lxrfpGRz2tbSRfZIRdtnz02Dw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.fd9da483.0_1627334673632_0.37522010496804037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j0m/s9c3FMy/4Y3zdzRRm3SnZY+BKS31KTwK0KBhjbmCvvaPDzStFVmwVtL/V5BLBWX8lKIv8Op47y6lmYJtXg==","shasum":"c282391b6391409c62c7cf892df3d73d410b7482","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.8a4c7e06.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqlCRA9TVsSAnZWagAAGAkP/it0StuQlPgaAObbYwuH\nEI0bSqISmXiLTi14xgc44kmAaE8aGc+9Spd9er1Rv231hmEPaimRIVbwhukJ\ngKSsTIqgygJgJhFy2FMO8zV80TTU878D8TuXXjHifjVWw9MJaApPYEt7Iedx\nyiQ7wVq5JIRaYcBFJ5EDCsA97GahKPP1wQOMO/OX94tHtYfBrv1UtRmQlXXK\n+x5uQBwVghBn7wpjZFfnJ5w+p/9lQgNfreSwF6szvn4kV1b4yqwpULLCfMTH\n8SzWwp8FIhLQmhhcLvxDYuV+zDFFu/1DXCNzVjW4ZBBMRqKKw2zHNxfor4Oj\naZr1AcyQHvRAte9j81KLZ8Ikj0jrH6Ry/DHRU7OiC0/r47OZ+hxyj1+Xzrfv\nrlSFQdSOiva6fGbppVtiUH8SWLHugEYTWhqlv+wvYeu0q56207S+cLht2185\nWfv5eAUsFgRljqjIQhHKoCRdP0GSkBm9VulLXqxiSL7JORzccg5PKqGJgm+Z\npM07Sc3D6kbyjmsGIGzfleqjKm3yrBb3raZUwwUGr9k6RnUI+TvHe4wGR/Vz\nIYO3e3ppTX79A6sqA4f7UHL1ZWSMRr2V2H1iCM7TJ4xs+mjBVgG1eeS7CA+U\neneI9R5zNXI+uQL1OjwfHLcP48xxTJkgV4recS+rg+2g5LljQFaVIn75tYJj\nXq0X\r\n=E9E6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeFhEAsV7JTALL0++PKyK3eVQmhki2RCkKstUgAuiizAiApyyACPT6ZMFajsSMI1v2+T1qSYqNB9dAROtZndxVGiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.8a4c7e06.0_1627339428919_0.0659530226141416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.5b395fd1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xV8077R9q64RSXJaabYqzQZESvVUkngeuZqtuACXWESzMIlKAO2FzEjAWsuSL7n7dhDfNyOYUeKG6dx9QMK8Rg==","shasum":"9ccc074b762accd2c81d367a96632e0a965b3c34","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.5b395fd1.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5CCRA9TVsSAnZWagAAr1sP/jt7B7pINCqsRBQFOI+q\nSWZIKfS9QNDGhe+R77mx96kLKH6oRcnnm4c5SrSr2DvzL3pXOjzVGswvBPD9\nMpUcfPYeT/7UklCGfXZ9GhKcJ60QtrAw6gcydEIT3dPrghJmpho15GMXqd65\nxjoiOQxpcHKXrRKOEVdzK3Fn6P9T/vHqZFUe/TeNDffY/pA8dRyh97DdBYxu\nadF4Xsa/uOJJcnjqU6X16UEGiMsSX/XWb8tkD5aJPlB+Bi3W4YEq/qzAvaK5\nzoPWmKv+TEr6LCWH+B/Iz7j7WE+CD82B4pEeNpkOSTMudCf0Q2rFnXpKiKVb\nTsTNfryLV7VFHKIy83PNy/u73JbLbSyiySuDsup/XBkKo2+pJH/qJE4V2oGn\n6Xq0/OHPXXXn+4RLgVIGb7FQ6mL6B/ublFnm3jS34VlAF2VCmzH5o77JP3ef\n4aRSz0acAkGmurQed+LaN1GUVJCBqr3ylLSMEcSbfo8FKAbZd9gqhHXrNutS\n4bJhRVHQ2gY/WNGAArliCMpQCfu+rPX9FfW9XterY3OF8wcVoH2hZJdkh0uu\nqjnw2ktnURNXMLkbwwOG70sPvvTXTSYiMhc8HHm6kKwQqOKT/39Y5ey+upTd\naXQGFNEKELFZNUWVS4yIApNuoixCJKWqciwsKykDMgo7gslcXKr8nDobpkcJ\nREKr\r\n=akNC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTBlDGHr5z6UMvvlquhZ/n6WwomnXUfTxZaIjiycZfeAIgdkWvuT8H1x28o7UUAg85qMoUq8R/NxY2ZSdKSg+x3Vk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.5b395fd1.0_1627426370630_0.6963858548580586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uqtN8Oxv8W/77lFn96MdVxwbWJzlCZOY9ZRgzka8zYaM2qVpKx+Un5rJFmg77rPbo7ORBB32nDXDHz3JgnWCGQ==","shasum":"7ab5a6123986ccf67def4595b761b2914e727df8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.e5efdcc0.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZI7CRA9TVsSAnZWagAAguEP+wRMxF9IJOe2Bv1BBrkW\n3laqMK/YvUMak/905IYpLKeXJdMoEArriLnsGMuZGU0xs0bpvVDu5lWwGua6\nrFnvLwRF7305N/GgT5wnX2LpyvLLRv3euQDfUhZDXeuF2A7GsgXm1Yva15lE\noM9QHnCR+Z/9j/7N3pwqjw0Ol9jGp0IhNQ5ffQmLzZhZvK2S62EqzwsxSFLB\nIyfdSru+oRD1uEG60pP0Eg/ydTUraXl/QwoAEydv/UlontlQW/0N65ulX76y\nAv1WD1obJUN1eeh7nM3SoG3l22Uo08FccveAXgGdDTKeHHF4HxhH0MCnymuc\n4doSuatHBYGsj5gIC8SlqRi+MskLrRWy3PVVljU9wDx1yaLPx87R5ajjopNe\nwlt6WR/S8YHOK8rrcuQZcyngVt244BCUmoYN1Eo5MEQj/JuXB6J5JWS2T9VG\nSCUw19/IMU0zN8gJDhLo4d4Ntgb4zYb8arfyDv0o/230wLECMaj9RM3WeGQO\nFf0MmdHsFiS7xIPe3Sm7XQNQUnMHWiIW3GnKG5MgAM2jC4tp7GBNAHTIBbso\nR7C8VljrlFhoJ1Blx/RZIs9snK4xo3p2yP78Uw99HtyQfPq1n1D/eUAiyASt\nwUH0p2akO+fpEJQuztfthHOQznX5hx+71lDEs6uDdbB4xeQSEx2Xs1sol0+w\nt674\r\n=vnk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBl+9usLEXmQhcNM1902+jXp9G0AQP70TUR7/Eglv9qQIhAMsWRrAvt4gwqJQznDYVQc1PwTZdJQsvXkDmzWO+hxTb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.e5efdcc0.0_1627492923513_0.8531455735804065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.ab310900.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LgLoK82oU1wr4zTIHnOGQBWgCJMJBqKaEXyhRQQVSGaCgZFt7uF6qfPebSh43AN3zDZGyUfB94YGhxaSz32X5A==","shasum":"ef44aff65d985b98db4719d6d3b801cbe8da93af","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.ab310900.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbw0CRA9TVsSAnZWagAApoMP/2665vWpMLq9ZOnaIyZ5\n8ql0g1+tdHYmbCp1uYen8e0EJxmlvlalKdWEeeuSb94viyueDh8IeRBEGXMH\nj55odTkpqPjcfM1eaUvNHrgKeAVzsw78jZmpcVR8QmPGrblibct+iBVQzxSS\nLI+i02DyYIpeW9vZbUaFbwLfTSaUH021SFH5Zab+7QOdw77c9BRtWWzpXA71\ngVyPGezoGkmf0nSdbItIanxqHhHHFLutzSb/Yyb+E38mAXXseVIQLme2GTgp\n6VXACsglnSviuzNynD5vgnMFLZ429rc1ZBw0u0KMqUjQmmZxNhrzhLv7xtMj\nwVMuIJ30J48osGFzJy075Lvm1NB7WEcImKDu+764y7Uyl6k1MSB+SuEZDapk\nt6sJbPHv7esrQDhPHYDVpq30lruhhJ+mMUB8e9OjoCRorFyb5GIAyUlAZSoA\nlXiVdpHmga3aYuRh9rQeWH8TMguYtAiBP3mIH8sWQUrd6TKsKOFuG5Q1+Lya\nmiIxRFlMqI568+o+IlyuRdb1aUY1ZLHO7wz+WZYow4dNdqqvIgX5Mv3Gg426\nolNXDkVdyRpDhNJipTEYQ2KXnZP3cFoPfWhDnlcpmY2Uz6YkavY/wZYbG261\njrUpUpYEgG+VYsLjeI7sGAcgzQRCEnn6czwkK81gmqagO+VFTLq8AnHaKMge\nbEd0\r\n=C2LG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2ukmWZ/ukPM9Z8W4xJ73G/txERvHnc8M2hyE8vV/zywIgd9hGNhRhtPtq01FVCZ5P0/dyUfH0JBsAERixbjUIRLM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.ab310900.0_1627503668237_0.14085948265533466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oVDqY8B26EUNuuamH4t1JEAzUXjpoZZSHsGBFimmqeyCi2JZsV9GoJ3Nmi7tXR7L5IgcmbQtMr/3XtAYYry6Hg==","shasum":"24b404610895271df98c69827696cffba3b9a7e3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.21dc9bc5.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1NCRA9TVsSAnZWagAALzEQAJxc/eEHa9/DvrXpFvsl\nmUbSvmKKTJo0LHiKYDYoyMpLvBgyQhMpRR4sUvnDKNTw4iNqxU3GdTcnJq+z\n9KRvit0ZzjVE2lkAAvLF0AyuBKgSrlZlt22jN781z2OFIfuW4UQXaVASb0iv\nPq6rqIMel8D/mJglooxEdjnv1FN+vN+Ys1Of9jgyO522vk5xbvWgrnqmuZlD\nexqDUQDH2AjV7OiYGiAqzZVJn2w5lVGO5gGRWwfRdGVAsUt72X+E1I8Au8YT\nK22KhwcxWaMxWHKYUKcC9x1vgEzZa8lNoJrhsLLOFz8Om5rWgg5SskAmscTQ\nFD80gA3Q/69lI0Nm1TzfDMzY+/Tczh84G1aL1wMI6ttVctpAtTV1TIOE3jk2\nHZc8UA6WA06EGkC3uYsGUuAA4CN5FPkQYQXD+NzHYmxEuxaIwDFlPe23RCG0\n2458/NeDaimlB0tvZb9QTxcfq4gsXSIHPFwhvDfwf/FnZ4hMXh0ugEdwStKN\n5tv/Wg1ryeo01gRCD61F+QaSK9e3gTDZ84bpFHnyOdp//ZlMYGqu+wyfxnIk\nz3cfv42uJCQO0mXzUZjRiU0EqBQuy1rrP7dBtNAImQHDxQglXznq9vm70jeO\naMUdWiwJ0sz1NzNQFocg4LNi3B/qk5lOUWSxJuzvnrmEoSAsWGSWBuWQgYRb\n82oA\r\n=8j/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDN2OFEuaImcJTGPnPJJxF+l4CXLD/9c+FMuIu6MwSzgIgfFJJCJ2Tfo/dfv7v3U/RRobgqBDpw/zjdCDiqWds1Is="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.21dc9bc5.0_1627503949649_0.638973258270922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2ftdQ3MNK6GiLx+j0kM2nBpl3bPtgRVWIxVxXWxcs1WAd9xSJcu+5CP4AoRYkH76Tr8xYkABLFr2qMz0KFd3BQ==","shasum":"89a5f62edf4d9e9271b9972e8503f2f9d44018c7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.68c7fe5c.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQACRA9TVsSAnZWagAA0akP/0dFAKb16cKkVr+AlQoC\nuLX2If2Ol/QWtkahl50COiT3Z4IJXf1Jshd36BTJJZgpCaGDy89++BMBTl9H\nwtpL4UeMAEq1MUwZM7UUXd1+yZ6izZjurU+dYlRwo5bn7tRyXBgZn8lxfjZt\nKR16z5jUW/WqAkCEtgeEMtKTdNXYNhG0PFYiYCHu7Ln29UMBMBhOIEqSmYH7\npZBDIwhEa582kB561Be+ueOFRrPHFSIpU8YvIJ3CeWHeN8b897me6TMLQgeK\nNIhKq05E4qWBXU/Cx1i6F8o8TE6dxdFHjj5m7Xbg4hJd+0Scyvv+yAXfyK/v\nC8XASUkzvrGsLJqqL0nIIS3BwNMlUupvMqoWPZMBZ6j9yacYnOBQGbhPYGRx\n2LBiNmUuGUypGs+GeWLPZfchJUZHzytlPKq+UqAckCUkb/k2dm9aqiTwN1yY\nFLc9oNyIxk/6HP4c+Rd0iui1RvD1OFrJa4sMdXIRDPOSuLQv3n6QDbs04eqr\nn1G9ZYZJEVDoMolXYXH+uwqUHzLFw7u6NZP2UfM2uVpME79dg3yjQ/8vBapR\nx9jICWQlWmys9OiFxVF9hVcaPD/n+6TeIyKwUOtadg37x8CQ4N6eo8DyUs7M\nLRGKquhs1BjmIzIBcX7AvSTEqlTG2GeePrXVMXr7r33h75GWs0OKQ7WTi+HM\n8uz4\r\n=Ja2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz0OfoKXYcsqGx5jGOFkGzDYDPECyh/kT6UOZd5mbfQwIhALgQd+ZEHBHZbwcaMS3PAYLRGIl1s67gDqZNv/mrXpuc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.68c7fe5c.0_1627583488212_0.15811039828236395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.aebe39e8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uVrDa4O2MguecHgJprp/zyM/1GLal6I0b5kmIDtPfP+tva9xmz9V4ejQ/qggxpuPyL0ntwonE5jQvFihYvnDIA==","shasum":"2f565f07caeb7ab3073d97136933f5cc3083ea19","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.aebe39e8.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9ZCRA9TVsSAnZWagAAb7YP/A8uJ4jR2wUFcnd3IVsZ\noFpc0OCPGM3IlVPGGacO2ox+sbDGnPRp6B/J76T2BUyUunWv1lfOli7msQar\n+XMY6zu6qVefPmQVyQkSmYQI3Pxkk+bY72zdD4UgbfN82nUPpPBgd8/HmWS8\nvuUSnVjCqDsK49heAgXzjNnl1sD0kbnp7tKmyFD/gKHI5LNJAWohxo81suuo\n5xRe6DGQG5lZCx+W3YIEiT26yLNH7XyhVW0x4eleS8MHn4y1Wr8D5AHyx/Rx\nP2MNk4gNfXoBt8ss7rGI602c4hv8lhrRBXsaH7H2ya8QQtsc16r4H3OWpoq8\nEy7pz0W7RBrYvAMxWWpm6SCmPfDzuiIEB0aYaPjD1BanblIgo4Sx4pcihiEm\nsSxaRYkCmGPaLU5zSDbHDhRt+D0ZXVIqLyVjkQ2yS7ADWMWaTP77r1QWgRIP\nsQ93UJ3cHCVbTVXJPcyDN8Rx8c85f7Afnu8CyB6NiAHjInIyZrUM7sa4aDwq\neX2+NHkgmtYafogFW+XY8vqW2+KmLVu81iRXPmX/Cr57YX996f3wKAWczqoH\n0qVsHAip4Xq1D23Qwi+WaLC65o5S4MM6XTU7ruTCpKz1qmNhj5QIEz1wxxep\nL0JBMwFJ8UzoTXL1UDv0wNF3xupSVbibr8W+G3KlizG8uHNpnZ5sAGLRJE22\nphCf\r\n=25SK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAYWVnZaX0pZSvhQHZ/oWNvCNT4npX6RxTfUGZHP4/XAiEA6WavBxDFPvDDEngGkItuqxh/tori4wSOb9MzG80FMno="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.aebe39e8.0_1627672409405_0.10809521727631188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.ea889c69.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/ripple":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qar5wnVLOhG1EnG/uBMc2H69S5ckaooKc6o9gTaX3zEEtN93DT+gJFm+0QlqTi3jegl4IqW+WeXAvZAOc5/ClA==","shasum":"ef5ee02944872a6581fb6dbcac1598d9142739a4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.ea889c69.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9DCRA9TVsSAnZWagAAem0P/juxPU9/VDq6PON4sPGG\nL082u2lKg7P0nVT7X6gtQFiEnJlYmuhr+PPLuoYMkqYHGvJo5p8jUi4hToMc\n3ct+UUuGS9bFBYjUZf4mNwUum634nMXc76fg2wUBtrxFqjYzrhCrxoU4OaJF\ncljM6I5YbcAUl2pokK8XKJ1sXsQUr6lbJI3PRdWW5YhkmigCKORZ9yuR+bGo\nfRDBu7nBu/8qtAIf3TFhYtKYl2oam/te3gFWfjvR4XDD1qSncxBvDoCrwEbX\n1YZr2m00y1Tnju7b8+6boCIlw5DXRFhlJUwv9DLLiiPwBdM7mnRtEVgX1EzK\nM6xqyGYTA+nmIJanMIIz+tkluHBY0i3HDH4umOcC4bfNsHr/9pzdngmROQrf\n9x+1o70psHnJkw1l/2LzvPEz8Ipcww+VfizhnBFtgex8+S0RrB8Z4GNx9k74\ny+wVULRzDAr6BTB8wRom8b7AmO8arHdYXS0/RhE7KQtu+qcfUeBdPPeEBCGy\nVky3rnMS9lj6DCN3IkD8s2rv3iP5YhBPydeb5USenAhlsG61Nr6fzDTxa7o4\n1nB6cuTi3B29yLY/2AtaoHqxjjnXzgf18dpOMZKRnyRqCoyHyNg6P42Ht8kG\nUBFbtWZGZu4+jW1kUtYBOvG5p0W+oyNAZ4sNQHcInzkygIek6usGcx4OnKva\n8uk0\r\n=NWNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNVhcrtl8NfEU1t5QDn+hJb8gl+fkTfMsMfiB+8EpLrAIgQJJF/KgegKhG5c927ic3Fc7gbobzw10WXWkV28WVNzU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.ea889c69.0_1628016451662_0.25345705665171603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.21918905.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/ripple":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+UL3U4DCBmo71vyhPKQ00nY0QfkapjBvFRXIjTOhsl3qIAiPqU/yT6qCcSKV06qV/7QRt0jxYktmpEDcMytGTg==","shasum":"13a0c9a702165cc4f727ae68bfb112766d677e4b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.21918905.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGjCRA9TVsSAnZWagAAZCkP/RlOAaGCmXBgONc/7TJc\nkkl/bow8LJQpYOBlSQpz/7cbyBEF5w3BjRDetTLSHhq23yBtLvYXswYLgX3q\nj2sWM+5RsNmJ+cUioqp5zbItQ2SHKzIoQfOojCZBpYSeEC/D5P7+s2uz/Q66\nppOA9mdRphYihju5EtCGadVNi6OloEJqCyyI/EFzrxrmFi7VoAhs9mL/m7dv\nZdk0GXPjI765taGNga0+r1XkrSWlmWbj0XQ1oQqN+2Omc+5Kx8NrNQJvaWt0\nUGDT+GVh+cZ2eIMkYFFcDAhHuuFqRREKlTZLIxs0PmZStMVbNeX5gUkNIX5F\nCQhmIv7hoHKTQu3KGFBmUwFTdZSTfHHUcOaIUI/l3LNkeAxqgQ9AEafLmQh/\nZcctvOFvT/wZNI/7KZi/QAYtmz26G0Mfjo6Ihki1Z9WpbKSQ4P1xn/dNT+M2\ngMZThNsnXSdq5TXZmn/V0LGDw9e5a0Xhw+QiIh3SInRsMpU+Snp0SaBVXaMk\nRcH+9N1jhEavJR/omz71Oi3evg/pG4ry1DmUfGFaphoQSrSqNoLyS4SuxqzR\nQ4oepnuwKLHnUwBBDUDG3JrGqCqcS0BevOp3FK6Ur6LEo+61H/j6pOaDiRhl\nwnJ5WdwMO4jjaCcxqV1zEFwo8jw4oUITG6sTBL9D9graoqkuOF+nyCJ87nmo\nQm1T\r\n=gdgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxpihfHcVze1pgGqMJsZSkl4EmKfUQFc3ZQjRQZ89TmAiBJ0sUSheWHrxsNstzMYThOwDpzKzZ2OegxZ/MGVzhzww=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.21918905.0_1628025251198_0.9762407063463809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.193c87be.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/ripple":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h4SbaorLO93GCI/7Z0wDXMRRYdgURCLhU2PsjbieH85iD53lp+jbCqlYK42T7VwLXvtO5SShshood2mhBxT4cA==","shasum":"cd01e4d73157f40ba069a1b79ff1d898fd9a40a0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.193c87be.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdaCRA9TVsSAnZWagAAsXsP/0WqVS7KtEaC01iGgVwc\nQCCSs2Lku+fPpNmKbXdJ8RPYYMeXXSY+599Gy8z8+ehvlat8Hn2dAUW1Us5K\nxNrpO1rIDAmzDbHcr+pFQLF4drPuJ3RRXK+Z3OUF6UvNApa8JgQt/I+zePYk\n1xhiin/EBM6AMrcyww0N4yg3CbmU9OiW5LyTenhlGO46ESgt3gl9K7/l9res\nConhmS4gpxaRx5ozX5BFHP4ZZqJ061b1Y55MDHX9D7+mu7Ae1WEvNFhyh/PQ\ng8E0z+gqu9YwZYEryF7z6I2rc67R1jB5tCvD1EPmJA81Z5fY5M8j4fhanvyk\nFPv2Tg5V3ChtnOXu1cB1BN+UE8GXTRUPe+xO2RdoNH3aaky2flnfLj9Dxt2d\nt/TyRf0ecXlVJwJs7Avpc3uG1Rl/SUiCIWpZvoHQW7JGEIx9JMgwNCVJDSSf\nyPr4DSX+5WTEGSudkBUhY9wz5ba735khz5NMwzStB2ztykdXtitjfOhD+FTp\n1/MsoQqVA0Us0xC5HubTqIfRUkwOwWeUIjYxsPO3I2KEmzkGcyQTBGq1e9se\naix/4MjZgvyCgbktCZI6pkyq49dRBgHN2PMoJ8c0uEK5MpiXfHVU2piSWLBf\nWW1swXr+s/yuyGMHRmXtgy2MY5TvcWsYy+HMMP5k5677ja2StcxQpYBXsKXh\nLJ7+\r\n=UZba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAIj7upmABCBVEsQxObabNfsez5pKg+oC7xnQ8a4+ExAIhAPM0F2Rth9/Pjpjf3r/QEfWBw7Nwp8jr5jkiAE71/Cb8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.193c87be.0_1628100442830_0.7509363870259855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/ripple":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MkvPzQSD5/yF/wQJAX1fcbGMH+3jHoE5d6uXHqndArGxRmMzwGT39kA48bOpQVUQeK/77d2haPQ9BrjfqPgWOQ==","shasum":"1436f7a58fc6b3ba7fe46ada83c04b6489bc7bba","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.6fc52d8b.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmdCRA9TVsSAnZWagAA08wP/RkN5PmY5WZtpP6DoWqY\nQxbkCiTO7764/EIIFKxfbUpgn+q59nJvoQmcy8JvD+w7+AFUlSVJgK19E3Pg\n4JEhgIcDWSVv8cgmEI8Nrgn/J5SCsTwkrf5RhDHNg7NB9DnYfxo8c6+Q6nkb\n7uayEA0q+uE0JqLRPrfIk10+/57xzBRVPlKDqbzJAYJr/VUYN/xu9tSQAGTP\ngLUQdnMuH4bhh1RcFkeel523nGAFmCXryT9UrFykzOWFI/JxCBqUGe0EvqO0\nUxHyp8ukN/QJErRpdmjvrSJslq59GQUlsPlmrRVLRmv3CJsa6SMPK+NaKb7d\nqbsG6jLJF3WQAG0l226M1bcrhTDhYWydnivkkPCIRKhG7SxkHkqn1/P/2zIY\n48iTxqSEtrvzJJ8x/NawWOtXQ3YHm7PGgAuvJlEWUi4WTLs0XoAJDBDaToGa\nroPGoi4LyDuVydGk77vjTSz4TTfLxW3vV/aWpnyt4kjmyx/lj3fN15oIYJ9k\n+mK/63uvlRMuY8b0YbLJRMOfg0sOl6ZquZHmTtAAHjw5HTorPMw1wkY/8O+q\nRqlLbf3iwgHwaCXMc7J6KXZ8YxzOkx6Xg95J/tCfXHcLcaDHDVG89HfdrX3n\ngQWoW6GBUaRncNw2sTOVhfLu+P5jG+V6YguT2HUDibJKJxaF3lJRprC7/nrn\nfpXn\r\n=acZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/qqNVQluwgC21nLhjgcCOVstx+MpZLXq75OPjXopHwgIhAILLfD/HnuijZ6XN0LrUsQSy7AiAu+6rYXMCMKcvrcRj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.6fc52d8b.0_1628187037368_0.26187870686293446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.e2e9777d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IhQ+RYnnW+HtWvVSVsfUnzieyFBlQtZswOTdGNwWfA2/iW+xI162xFaUzN0ioJxCHzJZL7WIaLdg7ZWAEau92A==","shasum":"52d7089bcf32cbc6b930692b7f1ebeb8351fdbf7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.e2e9777d.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGpwCRA9TVsSAnZWagAATFwP/iLczmdxWODj7W7rI9PP\nTgpzNPxgXvKj+73iV/HK8EIFJwOL1s6sMon7dWPC+JGYWEHc/YQuwSV3AvMK\nH/c89e60tzTBzDh88HvzUjY2JBBmr145/uHnlFbTKWLH8uXlUjx61pvM5krK\nVXlrCVsb+B+ruyF3WP5KrCglYwBe36VJ+IdOXBvMiCqqUu0NMdeb1sEJTTsB\nhxRF3I3/OvzAzuFsnRkvXhN6XXRmgQoTvm9aEmAOy+zCNPlLvcF71IHyhoBo\nkkqIcTtbRyJXZoCK0CbxtFayDTJZ6IN8rdsktyd5q0mf7QcpywnIGWhy0OeS\nBhjP8RAvIBTo3YBgl98CUIWXL2U6nqJrAZsMoT+0dEZNoHZBQR4v9lUTBeE1\nx+E8Yb5eQshxRtth4GX5FLf7kUNLgtjsZFX599p5/5RM1pHhCuHXAkqyWxtI\nY8Ks1PD85t3Pj30zM4LHVn8d4RHYOouUrwvmi1jluXED8txF0mxLdU/2oHpY\n1ndrRYkwOx3cJDWUBMfL+ld4DYtz5eQOpboVhJU4goK5DJQER6KXKCH6kw7N\nqLAOH8Jyq9X9UFYTsuDiPELUV1HIH/UGPuIcHj1kH2bdWLVe9UBCO6MitCy4\nChDzmOLYJQXanLaoTSaSjVKi08TqCmKstKJj4h1I/Ubzfjevm90VPFd6UvlA\nFBCb\r\n=WeSj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBtlgCaWYl0EAYp0om4J52W12dq9+P2vtdUCccvEl80/AiEAv2TuZqIBfF98GCesh6Kem6lGY7MPD0E/s1tszeBArRA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.e2e9777d.0_1628203632811_0.5476031187363513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.72ff1e68.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-58jtcex52eOlrmZb43oNYM8S/VEnu6mpGsWHIJvt8iTbKmPYZ8BzjKkXIO4rKFzgtNJ8fG2ko1FRQ8KYSqufaA==","shasum":"fe3ae70db6a0a04cfbb24948ec69b6d8ab6eb471","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.72ff1e68.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAjCRA9TVsSAnZWagAAjdsP/iAR2IscyfKH8eSK6L7V\nchzU43iPZ62mQktNilftS5bcAJmRjUGda0MFQZ5aikRtTJHOQWLTOD2uK3Oo\nT+bOGlGwoZZuUBAFEAduPU+GzEktRLvmmQg/LQ68/I8mqi4hqWYC+H3XDPZ3\nB2NawDRmTG7AetyeRbMF4ta75aJ1NYS0J5mnm5N6kFHoYaAdGiO8jnLVOwUQ\ngRguTho4YsQe2l9QY3iqISpsn6g4Hh+4P7FoYted+ROvFtb35pGwuKuavFay\nEUpTQjPZJUDB+Lgp/f5eys0bOxSFdzglswmIqTM1lt7bhJsxuzh5CNr9mxsq\n9GJmYtu60hCTdBgIoeo8l+5ROyvY6b4H8XRQvKvP6pYbkO+IQPIen71o0VEP\nc791rFq4AYOSvDY+eg4lYV1C31PFbe1zXqV9AtxBVBfRZP085O6DTJaCVZOh\nlqBQiOSNN68o3IHTqvROnLb68q6p2zzEMdJicLkrpPk7pXUklqpyaOxorINT\nqqavT/Oq9HZhQY0Rree6R0TRDOgZDVw2I18D0Fvr2ar5FGW/U9xOhbrs+a1g\nMcjjPpJ1eOoXMPOTXlfHdA8JUOsN+kjFC6QK2g4OGWsmcVFcKSUDUpWKRqb5\nK4Hl0G+2CQypyH1JtnHD7DD6Xd+CgekM88d7jmhfFa1tDiefNeN5k6gyVon6\nDumx\r\n=lRGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTVCrS0ClRsPTmIAeqvn7pdqo7DizbLuaZyRi5qOLpsAIhAKbwjL/40nSCZT9pRcGBVgw7YDspGD+jTZWhbo23VEKR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.72ff1e68.0_1628282914898_0.7026012987361345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.c527e93b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cFvKfiTHYIoznwo3enveBC13DMqrxXT63q+UlW5BcQuVTIT+IG6oDXn9zXDpcYK/TX9LHQmBR2xBvoW1I7py6Q==","shasum":"a6d6c1f76b6fb44251158db48c968a09ee168e8a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.c527e93b.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaU0CRA9TVsSAnZWagAA5xQP/3J/MOonyFHVx01HhdaP\nNmCmPFz6IAIhRGOMVHKWdfzyYIJ4751z3U58+mGlbZzufpZpmwJCNq8WWk/t\naLIG0/eOdlrZ844R5RiGG3oFY3Ct4VZENHP9v+JT5UtzExbXs8JwyYZrdCfG\nvMjP3b7J1ObOLNbClVnu3reG9v2xp5tebS3+/7Dzmo/9hfUjVtDQLgc+BTUg\nkdkWsDPDAWaHsXfq9a9hTh+DJArcibR4psHKYOoWetef49wwfz560QBcoaDr\n7gaUwUPOgO/6mDP6ngWT6jAsUbk9eJaQgVKAu6g4uZm8G0B/RM+irjfkFR2h\n3LcNDf0BzLiKfZBoKrzTE+bXk4fjG+/K/cvgNGx75TCEusxxe7VwihpGtiRQ\nhkgiHPtbZ16xNwtXF99GLiwTPkqq/MwlvZxcJwsJqSndByYMaLeV9avDnvI5\n1a7s6n7EAPpbp+cZ9OABA+gvH/OfMJtL4nWCIPaEpqKNbrNQjyKVQVvOt00f\ndTrtIj9ZDfTBCpTVld6mvatJlAscB3rHN4C6fwRNaiNkpsuMpLcIqbP8Z1Bz\nIgE03aOPlKuJ5e34GXCnE/rohkY9/4y5kNRL1FRe2nobNhjhSJzSCiofW7EQ\n4w6jdzWjIqSAp4p/PGroa4THfJWuB7rL7cH0ApsoYWl7OU3qcgyldy86Krol\nWc/X\r\n=kC4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHGCLYZB/LkdWcgyL3ePKqiFmYJhn5l44jAGBvlmE1zAiEAl3vTa0bhXmnseLeootrEj/zStClTHszkozhWSwM7OaE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.c527e93b.0_1628284212060_0.9039913300088256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.78b1eaac.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vqLmMdbOEvpVAMUWuTdjQ+b1DMZkITE0dKPJV6EBh35HJR5RbY9nUn4xBGfgtpa9+gL0rHWLos1AsTFU2/UKYA==","shasum":"fab76f8977a0cbda6227d07c11d9dfcb0a9b32a5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.78b1eaac.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW34CRA9TVsSAnZWagAA2SwP/Apt0FWI8+DTdST+uwec\nrZOauDI5edSUdSatIz14KqBHH3lKSv4wh9DVKCzoXkW3Kpo6aa8zjunA+9wJ\nFPeHHCGwzgdgd9yyuwffQ8A42f/sHozNQM7kBXwbHsIPv5nAWcgB1MOpG5TV\nJXvdauMWneVR+wwCyC9hQj/CCGl+sxRSJd6yoWf3rfQ1TKbuKtXrYLEQCfxQ\natjb5VT9IJREXUT5mjOcGHf+JdvC1/R0i0aS4GZQ6Yxq7vH65P+jUSqZ3Abh\n9w8BDOCr755tx0Q2caHMmLht3b372JcBW4NzF8P7V1mM7djI/6fNs0Fq7iOV\nQwnkFiej8M94NsArix7mfGa48JP5O+SbK75ImoO9k7Vjz2BSND8tMJmpb2Ge\n7laG0zVXU0p0xOp33DCtqLjeTmcN5tXJrWasy7RJAnv1NPZVEDR0UfiAOsWB\nVdySyG8D/jhKj9q7I9QBtufVFVTfTgP8Y7v/QPLRFd6jAslJzgoVc4fvcfxL\nDkXaYGyx3PGkFMFvC65X9ML/8Ic81G1INqqFKyqZU2/S+JZ2kibSllgCKv1+\nu1bJjKDGk4y8Q/MkIRoT++CU/E9igdiN5knOy8E/+0G/j7JX+sOiWanZ7ny8\nNFmZ6xq8wmQjeTzU10lBru+0YmoGXVPLLG4LBFmqdHzcY0xS1eY7P3xf9fCT\nmpfL\r\n=0Zmy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxokWAT0rRkRVnGz2giMUawwt8m5AeQAZAKODGJv77nAIgHwkGWkym86+pL5W2kEu366EI5ijdlS4GxodwpZNu1Ww="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.78b1eaac.0_1628532216774_0.8064338204479746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/ripple":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DFokdAXIG4igZFeZptN6BOoJV9+aSKQpE3KMH5T3o1ezH6y9JkF8WGKQa8w29zBYO6IywIYBElTGVkercdjVZA==","shasum":"828678978dd60043fd746902269fa078e0a218fa","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmTCRA9TVsSAnZWagAAS8YP/22TJ1PKLu8UkCshq7AY\nlyHqtNT9EWhuI55cv7ovWzwSTMXWBLE6hQt1DZA+3Jock5ZAnqj1hM3/MkAx\n8/xzhmDi/86IG3unUH0wuxMz1lTndRMJKcU4pQZ0cKf3y31+G+z7VmMZC8DZ\nP6MbjykRQpwZ0lzl8JYcGg0UfmskYBut8HbRusfMHKkGeh/IsTXBsTn7/7Le\nE3Lk1bLtO8gZuUwpTy3Um9gFNZWYziTH6nQbe70+TPbl14LlOXzUbB7yMn/O\ngY04xecHFH7owYtojRO6NZcbC1ed3eS9/H7T5LE4ZdbaXSp5JXrzBWu4W5Bz\nY+wNQRscBFLIjwCu3pKTnB06pGv1rWQkFe9oVYtfsP7XiHwxuOtMPyggHD2L\n0mn0bZ3zXAAqH3md3DxBE+q2lxn81Y0QxvYIF6pOVH0GOm3SVyLlxhwYT3OG\nP9CTXme0GE1UGldZ6GaQhp9PSwBCLo8FtpVpFPZsRFJgylpuwDdBFMopAUmr\nGB6NdkU4DYhXAHdbEgT84mDPw+Co3MY0f94+rmsv9qKhsQ+p9F+tooT8E7X/\nyi4C/J09DhC2kZO+x8bvkphvM18klrD0AGNRQs7mZR1O7k3/co9N9NIuN3Uw\nsI1JcJZ8i9Wz4xBBSWMwPdpLFfPIFh/DqLbfJXTXIiNt4nrEA8mQHFKzXebi\nnm3m\r\n=chtl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCepOsHaBjQp+1Hx2kUaNB4z/Gc0EiKBMslJijbhcC7sAIhAIUrdLQPK0t+N9DUrHb85NV7xKnvpVZEi0pw+pDaZWU4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.a8a4ddc9.0_1628621203505_0.4947075516856798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.99fc0632.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/ripple":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g7z2EeiUUl/q9qFSSySA8HW4KrIXDZsgRHy30qyYvf8UTuc6jhWbf3KlJe7kOGaslP+M3SitgdxRybJ/eznxXQ==","shasum":"62b36cd116990f9094221d0ec89aee8c65d553b5","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.99fc0632.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1lCRA9TVsSAnZWagAAk3wP/jWw544gnJQMog2jNT/q\nCbHK+LR+mfwLTCWj39GITBLJODb4wc0S+cuH8gsw/5CEPiCXJcX3UK9rTZSn\n+3dON1uyM2t8bMYxvSBbBpewG32oy8P3Gto2s6hCd8lGtcFK8qtwrs2/r24u\niUn2Fv+t5ywRxvbQecRx/h51uUWz+lK2rMJPtGJ6mDIGsFLcqX89LWJd3U60\nXLy9ZyYISD+9gBt1jTeijCok/Vn3Lwv9Tkrz+L/1rxX/KGFice6+1xDhs4xJ\nJulBZFFS1WwcghZgxkIV8heeGK9T47k9YsuMP9StITYJdsk+fMzEAai/sOY2\nE8GarsEhEfhPAq/3BGeMUhLJbarPjBoaXzsPSfglBDpOorZH1ugzOqerYZ2f\nFZnYRq8eA0JjyBnZ4wkjgQkwls0R3FWuMjQ5uBOBcMLYiS/A3fX2o4DmbmAT\nnPC0zjkcsz0AU3JdlONL/zQh1V9D2wGqDatufazB6XLiB9XjHDlwI3Sn32mb\nVQZiTn+Cvup/VQIhtdI8McyjE3Ub0+8I0l0h3xDpMDz7pxtxOVszWF6Dwa1z\n+DvIccIkh+xGmT7aQjavyFpDlY48EyGAdKV4iVzxqYJEjILNVled/gkUpSnV\nxihCy8fAJI3BZ6qUzHgw6oYLHsY/Ka1XHHeFb/ANGd3gvPZtQi9yk7d/8tiP\nM7yq\r\n=/tGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDT+3trVUxEc/X6R+pmPS3Z+9PN/WwT8LE5zFLRMonucAiEAqnlDWn+fNHqTGRj+yf6sCbwzLb+QT1NCmlXUsULlr+g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.99fc0632.0_1628720485494_0.6066048673598532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.3f47ae57.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/ripple":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hoNcChFDnd5Xksg0Fnn7jeQnOdH6XsagvKxww/o0Sy12x1Xg4VqzKpgk5drUrVrQCBxf5cGWbFVJI1Oqrs/Jtw==","shasum":"7bd9041c8cf7f593eb2b1cba3f535ce05616e963","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.3f47ae57.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGUCRA9TVsSAnZWagAAigUP/2RA1nUh7j08rpU3WVnE\nOqDFmOwUWn2nEyixqg4KT+B3zHdZ7WcYN9ctzfP3jNMZ8HRGWEv60b00by7t\nTpdr9o80881Sqz6WPWK/bwQ23Lg3MZZ06uWB8LrCDAjEbEijfI/ssjDKa0TH\nHZ5XT7oajW4qqDLE90aIaEEmRVH4skHr0zMHcsM6anBkBdRrvnz3oyKh+fXC\njqQMh6fqU0yMW9AeJAzUgA7iWcz9d8sjWgNtm+D/XuTkl0INkHHKUIM2QNFB\np+atyYhtwGR/aixsqwoLzHub5WsQjUdR4BComoLKAdKCVWt+OGd9+F8XmVYw\nkgLutTOoB7fUvoAlBSrEXbtj6zGSwE0qWgHpwKxZWhPjtO+YnGtxfZI/HHeW\nIEVM2qcwTlV2+2lqsuqS6iw2yUN5/ihLeG+nkEW9ZvBTQ9NeqSfjlC7+OklR\n1fOGLcRl9YnGdXfhHKWfqdSATVy1UB0ShGxZ41Kdby9Jly1yYDI9DrPyZ21h\nJexk2lFdcg4CE0qQWaokylP39+r196ZhclrfR+smff2fOdYYizzJ4TDf5TAn\nRzFaP9StiptrLsbrK/eO27HjpT0AUYR+RLXNdDQhlVZW0CpfMd/Ajwc9g38g\nXB0wUk4TGGoZp3QI9qVVk2W9N3HENhGw5235vn1XtS5ky835VUhMoXiO7PpT\nCd6y\r\n=nmKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSukB6nUavPDBukEVqVwydy9T1hqioYuTI8TQKsn1VsAiAbbTDYA/5YDdeGRbcusqGAU27pcLRgFxK3DlSdF7WQbQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.3f47ae57.0_1628791188351_0.13343671756988562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/ripple":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4vtBXOgTVpb21Cwp5jA94Csh1NAI8gdfFuvVX0sp/SE3XAjj5+PXqwo8c/2+diig3KxjUN1Ph9TNsDt4a0PIZw==","shasum":"aa6d11bc3b8811df7b771e2ccc0307cbcefd7573","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.6b9bfc32.0.tgz","fileCount":19,"unpackedSize":75965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWc+CRA9TVsSAnZWagAAdpkP/Rz/W6rt1sO9LIgJk6zB\nZE1uORnaBVtuePVUfdfbuJbQ48geXc0DSMxawpmxNX0uhGg7231GNrMtWfEJ\nyl3G8Gs58ZAhaUzrDagwmyyLVVdnZ69HZcKnxrqCuabUxCant37Tuh+2vYtO\niOkiyjciaWmQKGpUTEKgbjrKcW7F0bK14pC7AqZcOVOY6DvbI/pZIaIl+azx\nsQcUG3vrf4iC2sX+AxFnvyjnOIjuTiQM980FR933OBKe3W492DQIF3/fRedK\nZXXw8Yna/xKOh2DmwN7A9rxGJ+r3WXpGi2CIEYNpFxvjnCc9ARgTBF3FzM0b\n1TyvD225wg8P/XEM0U2GUEK7bT0cmmvuFtMbaIJlrEjNDhrRDChQIonXHgff\n9AOWtN2RNbK9mDK55oNNchzLzDz1cIQbZnPbXqWihfLvcvid/3/FR0qEpum4\n3Z7vN4muhnqs7p/hsqSG8+cQs0EOUP1JkwoNMu8vMWhEa8OLEsKGzAEDa23Q\nJdrG0HGey/KcPlbBHoWOoAV7GfQubwej6RxY/8F5LEUBoffFhqiJtmCr0S4i\nmlrnFcuMhoNShTEu39j+aTN0vhWKX4+pYcQ6H8iren4H8uSSPb7LlrFEVMku\nVowrbXSPxZzHAaLjeCD8AZ8MSE9W5ZFmjUURE1V3uedAp2gF1xvCs6b/u5Eg\n7F6Y\r\n=0+v8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYrwJ1eQRuvJEojGUcv3z9ZFSv/vC6yKtZi6J2DyQeYAiEArfDFzcXC9qDk1QD1kzyoWElPlCsTeMoZYxqCymucQzw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.6b9bfc32.0_1628792638446_0.4982492931606526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.c89ecc63.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/ripple":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+Di+3NPD1zCiVpFgLU6jLSK6ER6YbkLajs+20qO5gS8iGIm+AZu9EtENCl6t/J9W8CChNMwGGombKOpn5aez0w==","shasum":"95ad648b86e1ac94364d26c6c3c9e3f207f7ddb0","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.c89ecc63.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp18CRA9TVsSAnZWagAAaxEQAJw6cl7XiqgkBiSSAMK+\nIcUDCnw1tVYl4k4lVanWMz7wLlZ5DkQrnOiPXEFaYBDS+LPT3SP8i4oRivqp\nqcN5L84ZGetAC/syZLI1AF7PqQ9vYNoUaf3S8QTVkUV+A5X3CaY3wsA+LfMH\nvKpi+2FwauBKxgWquspDV4oy8aTtXtnGQ1XzGVYC14DeFuUEdDLpm1bl86dz\nr/KCGiYslNX25sXEml5aNAPUh3PxLrrYs1gdOxMrBlbErxb0Ahgl/DWbrw8s\nbBqLgPTYr6Zlp9KR602tCSt3M0jJ058LYKMEBnKVNb7UX4/mrmyKUEj0jryG\nwP6PCIpA4jpbpdWe4UyR0D8nteEREVutEC5EUBrcbFQPwoMwZ89kmfiNAaSM\nLcUCp5HtGJV2zCZ9fyqcG33w/WwH2L2v5+mU1yWCk8OB8GQxE/twoaEut1/J\nx1HocIiIQwDdtfEnae0qwT5l1I7pgqq92hBkTlofEMKd7HDI+wBbnATEKU1d\nQeiwZ9woAx/5PrUSD6g5PQx3DcZC6nyHodrI+Pci96cDCvDUkoaWengPUQV6\nshXHBtcQ0h/ZCjeGtq9l7zreL9sr15uZ+ubwAmIhmJnO93qZAWDyE89A4U94\nbqJUqChSzbY9JLViNIPfG11zbe+BgWyUK2sJv2fN/zLsOruJfsqNY+4ndTUg\n1LXV\r\n=ijf/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeX+VhqUWayEzc7jtswmMiSENBA9VEKVlPNTcCfgraLwIgHWCT2wvNpT4hlet24HJjd2Ux3MB6cgojQVQVgvEj5MM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.c89ecc63.0_1629134204006_0.7148994900206485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.59de86bd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/ripple":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eT5Ho6JXa9OgDETsu7qXeaBe2UsE1niWMVFqXt/vvHfcK46yw3UC3RFPfXzW2y9SzNFzhuk1ZMQa4fXFfDSvRw==","shasum":"98debe45dab68ca707f5caea99b39d59818b4a04","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.59de86bd.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGR/CRA9TVsSAnZWagAA5acP/jLlWPpkwbBwdJpUGYm3\nrn/A5pLV1tiFSnx4QWVAXrJoZN8Z3xUQVs2J4rDZlHCVI3KNDbVPTC28paPg\nCLW6IE8wZXuNqT3LRX27xUsF5SCTcduAEGIKYoaDIr5NELJNXZp+1SXD9yeB\nl9tfQKZlyA7hOqnslf/rUjaeLv4mOFIeSaJ4zIZS5dkAQGwH1X/BJ08LAi2y\n5fLXAsymaEng8ucJ0k1Q2QBDIQNxQp67v63ZGUNqFiHmoDCv1EFUef0gB1f3\n14VxQOA54nuL4JaxpWBACjexNh3HvBHOuWqlzjoYoqcZI821rMlFL6CsD4jA\n3BttO9ydGPcV/V4i+rAjVvqg36+kt/ZIFebnwaTZ3kXCKngxBSq5aPGGjMXb\nTIrJK3HY4yjR7BTkSWQSfz/Iw5X4X7ra02ifiC9lVASqaFVMHGWjrBbl6JBk\n9iGnPxfE4YOZjp4Fz66rLhnk5/YO0HquDOcpiBZEEe6s0GdSZ5omvnLvjgBy\n2J3LG9lqdWgWdcPn8pzqvdNWle08MqiQdaico+Pi4LZXcfVYkTpq/4v8flKp\ndKIoTRTzLEza1YQuOjYC0puA0Coxio5eGnDsDsqbsT0MlonQQ1Yu6cidQnV5\nRc/CmY/+EehI1TT8glsuvwPP+Y3afNBLdXml9Wwk7iyjXcqGmyDCosnfOsO6\nVDGX\r\n=vNzu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2BA4SL28LifYqsB+7jiA1J9Z1pnAnBvVPuAQPDirCYAiA+3EQy2BDHNp92jtSdydebBTG4x/czhOdUXpeagKcaBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.59de86bd.0_1629250687851_0.8211509520401508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.dcda879b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jptqg8XEW50iCvI6zHleMweCK+/qOH8BaRvDZdnxgXgy4MShT9kWI/PKFygWYzZmKCp29XTXGnD+hL1Acwsh/A==","shasum":"b96641709ae7640432c97e41e92892f5bf123701","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.dcda879b.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhICRA9TVsSAnZWagAA2KsP/24ErwBaTcUY2ZEsFfEX\n0BDVIsWEt/PHPjQnSRvRsyliumbOiTcBElnlXLKTASd8ZCvUfM3vMaun9ukZ\nUYcQgcHsn3lyNheUp0xxdB9DdTkaqF7F/ovRrOEanUCCHiaBuidrhRrV11Nq\nVxjpvz7TgXImjwCZxBp4bX/tvfdm6UgA/nkpdocoL+6ERv2nD3j67U1BZ7eE\nNNqUa9NaDMgsDoTOXsHc5BQPrWX036DU9pR/Ud2sqJfDWgmWnkdiYFX4hZR9\nK+XhrHnv0EbSu9ziDmzEA77eIGobsJp995PgkAR5Alhxy5FSRkFRiTBSRxST\ncG7/G4IYJEg5rcUAsvXwGPFVzKIlINtd++bQ9km+Yekg4xgefDhojW7xRLdf\nC5EfOvAy6AcmzPyDxB63nV+VDV4QFGDogyaMqz9qyJBiX/Ifh7fX1tFWnT6x\nOofpPMfXJlMSCtpX4xiB4fKeeBkWyGrCKhtOz4ZjVz59ZCO05zj3GPaX04tT\nYmqI6fUWSzywI7m6HZky65b1bBw17O/64zZwgJ6CuY1Q9dHjnfxoyzUGOzDp\nLFsHz5z66pULgNYlaKleaPAtEjQ9F78IJK+nknSFBbX6xKPxA3cWuTVmt40G\nEb0kFfD6VdxaoH3d9vFiZCExrgy9GoDqYJ3x2kFTEnHhFE/0VLKMlg53ekoY\nYyKl\r\n=UYQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7kq/2MWFcCLJcyQ+rNLlzyMhziH7JfI3Ftdcbmf0eYAiBahOrgIa17QVvtMLegKHhX7L8tzyhxH9WZPQwqnRPdHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.dcda879b.0_1629325384765_0.5909801863645259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.dbb8b366.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/LvM0aBoBpl/HHcOvb1NlEBmq8C2mnaGb1aSm/FpeS+m2uOkTPP5iGfWMZxHRn/mkdfEUyGk0G/TjOfqusanYw==","shasum":"4b5718df312910a4ffa8417eb856f78f591b9e4d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.dbb8b366.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuJ4CRA9TVsSAnZWagAARoYQAJ/T7U5wK/NYxWR4HlDQ\nWUYJMD5IcMSSMOBTUDOdbO5is48G7x+KWsghv3HngEq4aY37yLaOkQoZpj+W\nubpmEkkrUPMpVxKmvc/udxZ458rmM3B+H+zzBtCUDgvPsj0SDvXo0jZSfGnI\nlHTo7Nl9W4IlIgkhIaKvjtvnDScWLkumRCb4toQ704gW1KGIVmIaD//AAOhX\nIRnuLEo2MUXS4xcuRLPNZHYJ7dJljX1SGbbKKltjEBRJp2eXftQF/P18VgkI\nV3r2zodKuI081CngCUh9pBqizLW6+MQEXR+ZnEV//xRqL3QO+VoFL5xRsBo+\nALn+qWmmWi9w3rpTgxOI2YC9oA6+M1w2zybl0aCKjefGRK0o6yUJmPrAtoAo\nIB/b23yedKGa7nhp9OJ9zBgx+yVJANCFrYntgEFb6eVZZbKebCn93B1mHW/y\n54xWlxpcYaaHIpKDBu1SqnfhwM589g43YcCXNc0ba5i36FEvdq2aK5InukB9\nhMJ1iNjG/5V+8Zl12kg+feplRTIHroTkaL1Gu9nJTKxSr2ioPile3z8nEPXr\n0zEdV1uZVtubW2ESatKDj9HrxwBHbpoRhGvyNON95BKeN07cvTDmpWP/nKrq\nuoSwO1P0g8+7HPa7qajFG6Lxg+fVPCCW9erloFpawZsqVJhWNm9oItt+CsOt\n1DBj\r\n=HuQZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzGaXVATYFcYiUYis5yunF+90NzD8jf5+y1VMOMeH3SAiADuli/InnDBromRsA8gDrjCcMg5nkEtuuC7bLY0SFXUw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.dbb8b366.0_1629414008138_0.1234333866925339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.c6e3060c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VXWCi/rGu16VOpkK+u1Ftkyuzf2IOVJxeXk1L+YwFDQa8eQfXw4G1hvHm1ehAZqjJUmr/Giq1Kl3DmHn1LRTsA==","shasum":"9cf90796922a768a606ea11f28a871794f25d146","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.c6e3060c.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLnCRA9TVsSAnZWagAAiqIP/ik/Ymahhn0xbK7MiqEx\n4DaIS13TmtlDpSkBt0tr9EsiN2sLh/f19rlTBZxRk4wwLsbqSSM3q90ZggTJ\nhd6JFwA+mUju/uM9Pf/q6huNYSr43dXRW0D5YVvSkVx7hF1zYf/bOwsSIhMp\nTpLAWwbuDXebHtEJXDoizi/d4hLLp8DK3gCigGvC9hU/Sb/gbYbSTMU+bHYs\nnDcmOBIDPv6rVdn/CsKjW48bDpEhI0VkADDpeThaQvldcZURGdw5BsFq2Tk8\nByjSbK9K7bOMnLNTE5ZcX2Xr1eYIjkMEllIV2+ry27S/MwdZcScayG4DrAXS\nrimMCQQySWj1HoX27XHj9l6ZtB76GkxayJBVEiiRx8iea77fm7+UA2NvcpLC\nHQ78PzipgJ/QsSBMQRfnrEDi8FEHiqgnmxefMbVHndIqY8uwbIvlc0aiJInw\nEQmxNzCPCTTJ2aUkj4epvHPbSQtCkrkVgBINqvQ2/UjHI+fOnlyZUBe+pLU8\nRYkT92W+A6KEa5enVX7M+aD14OBb2PalsFz2DIdrjR/66o0QxDQWROKx75yN\nota/qrrbFPNlKw6OLJ5DhMsJUOgprvfrirQZ3hCUXbZgx39C9EXxlnkLPwGr\nv/6v7qC+T3q71SeBw+S6Ioxo5B40yeNzSS3viZox3Imw4SIoJC+QXnUUhbYK\n0Al5\r\n=0hdV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVc9HZ83R2AYxlh9ZqI4+iaeCyGajadZtQN5I99RKdvwIgWN8Ydc90PvlmP2Rk1k+hFqjg9dVQTjwxxIqYLQVuLvs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.c6e3060c.0_1629414119754_0.839127442079346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.03120b7d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/ripple":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hXjZf0u9drJgJDW3woT/C8tDf3GErjECevNrPcWxi02WfazAKl+amkMVFPxGUVaU2jhuQ6lzhpdOWCfXmUaEPA==","shasum":"c27a72908100dd964a616ff9a58661970b0e8b06","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.03120b7d.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbWCRA9TVsSAnZWagAA94UP+QEZ447rhqlGiLom4T9m\nXaVqsrl704F178QIue560+/3ghwygI1XWSOYZglNHVkccM5dmEeoT7Lrvwlm\n5zuJhYUplFLgbwNOJmyNmDOCEBQ/B8x/mQiGVqVbcfaxNLW20S0JQ8mGy9TZ\n7sVJKK/6d17th6/y++MrnTtjKRKAe3Fc4Ohny3CX7Mn21WozG2Qvir7o1yze\n5oOpK6FMjvjWZQHbRxHBAtQ7/yAacb32z9d5J+Pj7d9AKLj8mkQ8mowdx+Eo\nr08hncJqMFDlA6zIV3DkS4x/BoDXvnSkIGgVsgQGCsBQtl6M7XjJJM0Okbre\nlA42pLPu1kMMVxwEqP3NydHiIZvNZRJestZxkPvSstnnC8YbKlFmkAVI+lvq\njDxFHWmioHbUTRa5iQIjCELu2MsMn4PdLBOYXZ2lmHsIhPdiM2stHEEmEHa/\nCJ5z1LpfXJuvWpKtbhrHbbWT1J5Tw++xcg5V75d17GSxhA/PD9YzzjWmVRQh\nWq91J9AbieAcYwf3JLEdTkrHe+7AB369FNeB50YQUfLxkcUk7tbYdriwig2r\nIX0SnknuI594ajos+FBLKqUGauUMPO29M11zjKGPLtegCChA1siqNtC/QeLz\nmc3HijvSWe1WXeQrpzHPJ93PGxZ+TSL2fTDLR7nodaMgitwMS1onMrEWRQPz\nUvc5\r\n=A3o5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ/WYPdolEGq8D1jOxvNpD1iKW4ayd+OGcGf67QlUFCwIhAKl2oiPlreglmSNGFnW8bY4aKwKSyOp3BchIJqHs+gvG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.03120b7d.0_1629419221885_0.034575408102659244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.d75a5f74.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/ripple":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7stTTOEZp4k8IWtoSn05D0DyKs2TD46GFOUf2IVCXKrGieOrbHp5mhv7uKILvbwbIUMT7CzUrIA0ZPK8bhg/fw==","shasum":"ada0ed74a16a6845fea647db097bdf98f5522a8f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.d75a5f74.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2ATCRA9TVsSAnZWagAAryIP/RXGEcQPnMN0ha7cULHD\n1T8LUaM0AioeFo5xuecnUbzxNRVqNYzp7r8BXLXcBIq6lJgfQbLJpinxfRri\nJNqeHuR6RZSzGDzrcOLuyiQ9+VeD/OmNn8lxfFKcYozpEFgG8VTztTM6xF8Q\nKP/k2egusCh9JEeus5ATfmkRno4a4+fWDfdEj9LO31T0ZT/lKm8wX56v7wEV\noEXhef5lopDcIUvQ1MpIZMopZpGJyicuLRABGkqGtObLVuv5JRU0m5nGbJHD\nwpKfa/AxPzlmWW3XZCiEVIHQ9lWkW3ksweRTY3V7Dj1kgSNzwMbyj96B1bZJ\nzAXUGQEawHCRRGgxo1Zf9lwj+YQFozA8QqUkwXnHR6/GIlQwjZDl0KN7FbiX\nXmrffKofX06jzezO9KCnTGXuHE0HX4RBllUqjLXXgiyoC7374XuISq3jGShO\nVwAxlM7q9ou/1N5A1Gv8RVp34KDeaGAcbwr9I1xSRDlzvwcWA4ugMhIhAYdV\nCdydjH2RJCYkYid0gR39/9WUTRDYG9F7C4kN+hI/VZvxbUOXMp3TpNtt9lsh\n7C8EsfUMQrnvq5Zr8fhh+WwKnMOwm06Imie9tsQh5nxgp+NS6mVegMNPBCUt\n7O660h41aDh0bI5LfKS2Il+4nPRyS30GaLZw0CNkzjEbYJ+6YMku5WPRUVzy\n76cx\r\n=VsVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9yYxbwefdsR5vqwCECdHG3bGQLI9X7d3rIzZdwVCruQIhAJGSR7Y6/RdkJa76UHcX/MJOJ8afulQDPOm4VwKkAikR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.d75a5f74.0_1629446162920_0.2675283925942893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/ripple":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6j8IWwtZLSlJH/cGQ2dpFAwI/W9UJQUobtLh96u829YrAkolhz81vPn/oOe7SwjEfsKaKPEwMzvmSntQhNnYSQ==","shasum":"3dd5254af893dd78a1244d1196d7b983edbbca88","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.3d79ffe7.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SKCRA9TVsSAnZWagAA7nMP/0aJ2Gg/EWWVdIRNZNw3\nH529QTD834BT/glYzGjFxTG9mRzPavwvRyRhPjntsPeTGMv0LvvHYM4thmcy\nH2/msT3ziNIT8Y0qcy8UdoWX9/tOfyiecrioE4Qfg31hoTgIgg8WneDFLX9S\nVDzX8kBRKksrqGyJoU+kU/6i+YVLrG33E0NF1L56TMEQslCjxGv9h/7nFDzy\nXGi7LYjL2y0rX90DnxN1bbUrEzimkkTUMzygrufrFu6ZPQN/9y9HS+0LGtb7\nsk/I11yWdszBMfuRYU1EMwJiWLxGBK5YaCaB/Yf9Z/3fwY+8Ya55bGAF1crK\nMpm1f+iXTVYscnmIJsz1z9JmpbRvaVwFBaf5/m+5iGKDgXUBapOClYC/TD2Z\nfT+UIjOhz4hYzTcLtagWQtlM2qDNPSdUVjxkrJ8+HrHPz11/j6bvgO0HD3XB\nJFEwBNynhYPr8ujL9Eorwyo1AuO3J+PV4a9hrKhEBdXcN19ggU/DOodYH6aV\nBTSALpS9KT/sy35fjnDTzrgEohXcissBeiy9x1ZLjK8D2xl+SmvOF43IEEJQ\nfdWBeh2oeVNjXYpqXWyuBte0EjanR6ObGCyFLpLUMmobpEz2I56pUbrOd8Kb\npoxZQu4H6TFoMa5s301TvPcb8vOsbk4arzuQHgnerkNat10Wczoc3dHSaDKa\nbqIi\r\n=anUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJDZFHO3M7/10+gc460JZhwi/JPv09EnjtA/JSsRxvuAiEA4jEpxztyng0uuMEihUgI45p/3QdvkITkmORLynX7t3s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.3d79ffe7.0_1629480074822_0.07798975940150843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.02213ebe.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/ripple":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Doqec3+ACIrW3KonJw7iOtyGjDWH95LxCCNh44WojT6Y3BKQxGFynV5jyo3X75WRcKZaTPDadVwXNt3PEn1FSg==","shasum":"86027d94ed18412db9de3e4563e7117ac124a47b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.02213ebe.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WlCRA9TVsSAnZWagAAMccP/3LCjJdVtqSrpNvhItrm\nV5gUgxoSDSTE2sYv60OUiSVVO6uKT7AYgsg7BjrkCx/aYal7F4V3w0ZVYLK4\nf0NHlvDmPoJuiXgB8IQo7Z71k+CI0l8jStsMoL8cffZoUDZEygBExkrl+A+a\nDe6D2IhGqRQZROUY7VP79UydiWbMmHLT5gnqZBGRFN1OihBkiRlPUKpErt/A\nAP5RFE5A9Hksb5gI5Pcdej9AWQrTQTeI0DUq80Vu6u8llqSzAdU8tQkRlEYv\nc/KhpasBFmppLXlMK/2ukssafuHjYdR74fzy50a5d8/zBZnGotaOp4x9J/ZJ\nyqf+8rTy9dpfho3UNNOATWSqTf9ooI5zxJivrG43KjSxs6h3YHEAdv6jmVL9\nDmkep2yj+13Hx2ucQamgl3zw7nSrJsKE4/MsO76IZX4p6dQ2Y7rktSL6TRUN\n2C5DzAaitigK4ZHxVz1R7Q0t+diZM3QlSKS517G8+jVVkxdOt5khpnDRo1Xl\nXbbZ8BMvQIIi39BRFWNVTlD0JzFEqEcp7owxTmw2/oGhRZCAIVsyxgGOYesM\nFyRFMunFSSajTylBojlZwIL++8LHPI7ahQ5qg4h8ZXy35bAxMD3hT8JKoB8c\nWawkki7k+TB9noupHimPt07ejGKCUsP8GFAar73YLwK1fG0adyPfjKBpN4B+\nmyvh\r\n=Rekd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0LVAn9ORum4qdAmG4codif2eyZktXXM0jE72c0zDLYAiAmnQFafxR3m1oswNDD0915JRbpeKVRI3xBqF89unI/IQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.02213ebe.0_1629480356819_0.9587535511974208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.90a999b9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O+gbfItNPw6L3PciSe78jDjUCXlfw/LZIH6wxmXAx4UAhzDN8eKCN7VivBPqgxtStdUJ9PYuPfu3ZeZBYNPfjg==","shasum":"f225b8ee74bb334d87319134f9d45f932068565a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.90a999b9.0.tgz","fileCount":19,"unpackedSize":75943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/eSCRA9TVsSAnZWagAAT98QAIM8UfO8Cy9GwUvJgDTb\nLy5xl99fthSxSXwhgN8yiBkRxxAbCfVCpP687vzVc3pCcoT86FEID6bMYULD\n4N/ZPnVeZ1uloQKierLVjiGIxxfgxp4jonukvxx4Fmn5E9wVdVIR5QqA2ETA\nsPHFSb6ChpCTPAvw/nnKaWnVfa70UuSVjBggE3q6CWYaFU0J+N3XcDPHoLUt\nUP/tN53jGFmWRvmEiVQrjdtgLglYNamoLFOrdUayIoOvALkfpBmPFjSUoMoT\nWrBlm49yScSFKVMwXGZrCPg7NBPOYopQs9JnKlWNQ/SkCPxzw3+AwKitCz+g\nAA4IFEJqui8qOZNS4s37UV93kcpxKGIpRcLU265PSHfw3EkHi6atXpm4t5SC\nguELgzwalw9dGm9QWv57vmdmCFDTUfhz7wrF1yhcKwvzuRxeniVY15El4YV8\nPC89hBXc+xQS8pwrLSnh6soCeOtTaM0FFfQ3eyuq1MRCBFOyJ870JdkT9XoS\nBcU/349GBVROFnmsljba1zVrBJmPeThf4RcCLI1KuoD6jkNwZkYR71LM1aXW\nyVI4cAZoTq32WeFa/MpepJRL/3HghwulN5EZrL0lYmLumRS1v95HuIiIdD5A\nYT8zpwLw5Xkxtqay353JDf68ygBAbOYx+9vuRQq1llL9pnxrLo/Cnymilb9O\nTfC2\r\n=4qJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH06dWMAwL+7R9saz7eo8IY2b0CKjLHXlElDmSZt/nOMCIQCz15M+543tYc1t74FKRvzBHd3KtYCnKF0rF3JTdsmtPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.90a999b9.0_1629484945911_0.35929486060142635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.6db58716.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H1px08iBE1DjG7O389v1KBsyPLiIyY9+25jUFm003iBZZKLquZVje5D+O3k3APKTAhk8nLc5G/cC8BQ0fE6vNA==","shasum":"1fdfd5638333df99bb1606c5e059a800ea4ebc95","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.6db58716.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VYCRA9TVsSAnZWagAAewgP/3+1QHlr+4Nq3PUb2CbA\nGsGwvGy2hf2bhjZhf33iP9NZ0UoBZMalhyuMXLtV8S0sq08YkYySgNKbkp+h\nJz0RhLZXitjNwBna5drx3CdTLkfd/3FfQD3gGuFvNQlvr/FGSOX8gVKgAqiW\nlPJDRAhMCxTHxhaDi4x50AH2ffIh7yvApX6JyddDobKPlfSzR3ZJ00aMJdwZ\n5h5u45aQyFjqDrxa5YHZ3omzPygHEDfg20AJK97b+ve4at/gXt2f/wItyWDZ\n5wrU9ykNV0UA6f66sxUfzSfwZYwEJSrl4qoZmTkeYuyuFITnU0lPSOJApbUZ\n55NeBpqr913hgg/E8jKofNElR/44scqkwECZ6lWLfArKRbaDe1De4C4odSb/\npEO5/CulPwiN+tS0RSo0CLaRD6Jb0B7fDSZ1nBgG5Dgg+QQ31mKyALLAFYLT\n2Zq+PE6UIjh6f3xHnbeDp+ruHsCVOEy338FErqlBAMimcL3dS5RW4rsmF+8D\npqY/xkSwScNLmwuK2iuFTwD58OgPvYX/75jJGujl+Wh1wCsjJyWo90sua54c\nhOlhrea2J3To2FAirdzqlxFpZw9/KpGnEulZOkPwBNJj6uJU6o2wIOoTAH9x\n9M/eOwap0VusJFknwvsnpJP3wGGHRsZMrZC+qkVOD6TSq5ZhjD6NRrzvvz3j\neAW8\r\n=Og+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGj10ZEt9pX3u7lU9042FWwtwR2eoTY2kvmHzyAEtDTrAiAcv34fTlNNkLAgS4AparxZcat6yHaFxwelyT1+j93I/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-ripple_0.23.0-canary.6db58716.0_1629709656642_0.40104891597751346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WcjBjov1+FJoW3/VLNCChK1uSuWWIJixQzO+cMma9nUAZWFA+xIawzFZ5xIHwoViJZ+O05Qj4UgkOgjXuRdNag==","shasum":"9d42c77023e0878b6f54518c9c23ee8f51d5c599","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.9fb5bc35.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYXCRA9TVsSAnZWagAAb4IP/ju3XnTdjCWcahhjXUGy\nLjsJktgYataoQEbmWriYmGUdSvBnABOTE75a5nh9A+AS8czQ9xxv4wuz4pJY\n9/7oNw3Us3KZ7Dw0xYF2U0vqEOEfnTEM/cPhyJedo0TReTn8Ml3LjuZsHq8I\ntsk/JAlwsvxQYbfuYsHHwCTkBfdCfc3HyPrOq3aOOJtz1e2zunuTc2qw63+5\n0obrpIm5jEGgj9AI89VHp2yDMILHN5f8JIM6+V2TC3pBw7qGQ+mxRvJSqkqi\n5Hid3oZMPZyD+U04JdXQx+t9L7mX7RBRGWA8cpIiyQPcpViWyGV6WU2UqMdi\nzwxowfioj+spI7xCuglfxL0gIHInc321ljlOhesTNWxTp5ELUSsBdsyl+YLX\n3GCpyJrFN2iP/lUACAiYn1aOdhfqkghKDSrx4K8P442nwR/XcDmLnpLC76ZP\ni3Qj8bafGB9AqckUxktmkRUsjpaFMKFtewnhyPd9dYqNDUz0M3QPOGtezeIp\nd34hVTAF+2HJU1al8JgwXuX8iRUx/+N/hWo54XRE21TeDibEytgnCEZ+Jbjh\nV3zUPQsHXG9k9FhjL1B2n+gx/9nKWtHANvflYcYRNn2sCPEM+iEEbhhgp/1f\n4SDD0LPxtvHqeW/+vjO4WLvbdt8HWeCI0SVwp1GO3sD5y0Zudj8bqv+BYXnp\ng+K+\r\n=Ny6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaBbXEY+oNvpJ7163hmsNy8dU3cmr21igB7jU37zREoAIhAPaTqSBg8L0tLC82rmqy/we00I7m8GynPt1k6dIN7UdR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.9fb5bc35.0_1629758999509_0.13009791355442224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6GHVThEbxAYbSlQc5/zHVxkPbwF6fub02/lXXWawmHr4i2AURZANKgsFdlrYdvs9kWOo496HSxu5kj5dVN5Rmw==","shasum":"52fe65cae3131d6760ed9229e6a93c528f39b124","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT8/CRA9TVsSAnZWagAAOewP/13yShgY4uEhHPEnlQsy\nMiFrFZfPRTi6xcXyMktT+b8Q6flTe03zVl/DBugaCS2mlgVZlw35KID0p9nO\n9jBj1lM5eoP/cV3Yx9z39QwYO90720sAYdHe3Icdxa5WCE/drlWCGNpoZzXf\nq0g0h7mj2t/hyNvBRjxphItivCWNCXA9ilDINbwTwxiPzbiqLvaZ8JffL/2X\nwc6u41o1s5WgU3mFw3zevLmnl/fpvyQ1yX/ISAotWG6v6di3YO3YMKARsXXW\nhJcnS3CL/0YfijX/fNZ1h4Vxx63X613FjJx+CHXLxqmZYn/QTOQ1gA61nL3e\nEJsOvKYUFmvo8NE0pciQIIQfvzu+v26HuNHkFN6/Wjl601uBVJSDlPLFkDd1\n9NFQxgg80aTtboSDe6OB/qAww9X8k0RFDKUaNhNknD6YG8s8gtFjKTC8r40x\ncrOLQJNrkweKtk/7zagcHDJgn65cQlIMdC2Xbiji1eV9ElxndlmfKHZ5Rrhp\n1udD0TUZAu9owdmX22DfUQ3LNajCxsH1BCUHllf/0uIsknOafgIyN+KKKc1G\nIH63yz6t3IHVakVD1how6dro7QZ27Evm0pUhjbrJQCWsJ5gu7zPpNYaaP9sH\nb0jgE+L95jrnbp7xByYo4lQizBDwi8QWumGAysK8MIvsmvSAsAy9BXYphBpv\nH00Z\r\n=e6h4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8j9yGKHTFyZT9RxCZHtAHQlbQlBXf/q38T681mI7+OQIgD3YYhl0cfRMPZQDYP03fFTU9eqgAEBRfejEs5UPjWLk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.ddaa5d8e.0_1629830975486_0.637056441008824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.756208fb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UIHhVGSxh7NsPDBmERNE3j86ehUbzb1MXwQLdjtazswhA9MFB9VVAnc9OgWYMV7ZX7sS60VGwmTDbdu41uc7Dw==","shasum":"247a36b8a25d486fe88ddeccf36094d8a50d466b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.756208fb.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp7/CRA9TVsSAnZWagAAQJAP/AmToGBy0d/w23zd+KWq\nHA4wL5CyKPrdxTTXyr6TCGmqR8hEFsMWEbyqGUJVYfKd5ipoBgS++l99SYWj\nX63JGal350SzRI94fPn/sQEDbiLyk4JoMS276IJ+S5dUDLFe+bqv0sAm5Ulq\nj1MgNmdTLkrq278011xV0Aix/2RJFCEubF+s+QGEoTJcTppD6Wz6xHnZt6+h\nEYwclDJTWgcdJkU9v5ESoSPBMBEbQChCjRukSkPllFctqHHzAZ8XadQi5G9d\nTS4Qkc1nNfk9Ql5B+W3AhoVWOSDW1NJnhj/5WPuwJnLTq0zzo8kQVLXs61Wr\nl2chiBqXg+ot9rJVN2MNRN7oSeix9zRaEHr2KOyzkWJWNs7ncXnUXDvQTst/\nEUdpHxERiPWkOq4e4rU7hKoxSvLvYpz6U1KGrMxgNfEMOrZZ88ccolQMsvWG\nbL5HF58786tWvFKkxn87NNHnbsIKfpSXCqx4MLuRO/BdgbKax0s0vLH7ySw3\ntmp10VQYY6qugRuFtGTxe9Gev4crZJlQxlZ6ppuZHMCfH97N2UaPLIp+q/VG\n08vOQiRH4tlg31+6zC5RS0Oj+YkxdN4ZNbsb0AnogNn2gOSywj94Ysxc0QtD\nmI2+MwenlTYPCKTN40iiqjZAEI6oN/4Buc7incPBvAfCSrBo4WsN9jq8W+JB\nb5DN\r\n=srf+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvLrejIYEN049w46Y4yNvL5O2u3W0eXSulf5nCLn5bHAiEAgjUmodSsH7pOs4+lX0ZJU3lD1Sb6v5fGTwrsNk6pjfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.756208fb.0_1629921023418_0.03719507033100977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.9576dcd9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XEw2yJ90xeDwcI+be892C9jVadE9tjb2Vzlh8nIzzmV2ndsg2uyN9PhVo4hX4ZFSdHc6CN+Ji5iRmMBS3XqQEA==","shasum":"4e08014e48e85f674e11952ee5ce8279900268ba","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.9576dcd9.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmSCRA9TVsSAnZWagAAIQ4QAIUJ6qIB58oWZv78Hp2e\n8e8B79mQjUW+wXzik8EBBnUveNTJ4hETrw2XXxnAATvjM4h3g907iQj2nQyR\nhccdORxFIHlSKFz6mwqhODnkhL7wvcURdxzt8QrW/nQv4YqYEE9ZTVfFu2Y4\nUCjZLhF1xxGuUwgo0PDPDm4wlyh0xwz0L+5eAwcNXHqciyASvhEi+TMStDAv\njAqZRcpwpNiYwWNyqtvPGI1bqdTwqOsdg1zQzzEghlqS71Gie7Sq9yIq1kue\nw0rTDSB7J6uncMRwL4I77uwmKGpNK39shOfV50cnV5KuM9xH8tnN4dzbXQi5\n/pRlnW9yaKjdnq37Mdh9JFbXXWj9TWkk/IXgSB/zL9Ty1zHCcOcKNjwVCtvv\nNEig7UiOoY5Is9Szu1tX9FgGMYaP8ypYVf3t0knDOKYnTmcPFRacJrvxCyXk\nn/Il+sIDTlVe497rLnPRX7D7IilNeEX4fiV1t8bqVVHFH3jeuOpHYRxcPb6/\nLlf1LKpu6rNkuyQSA+v7FvsW1yfsnU3ehoffbWwUFKXV1S/wMUQfIDHbb846\nSld1X91VqpTrGyq3+/GkW4trMSH4liFOPUJHlvbnkKl3/UFoog3vKf2byLP9\ngePHnUf+2HYiYanLPrAonmX5esMa01z546OA0EQr2WN4y5ZX7mea6iqsZAeM\nTqaf\r\n=UyVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFp+d6/mf6XvTK544k1rKsvAm4f62KHqll0ANiYZo0CEAiEAjvaH86+xBp0OnESgOlarBIEyC8mMbmclne15olxMrsA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.9576dcd9.0_1629927826088_0.5510001682834764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.7531cf97.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RdW8Z+WU6jLcO9m+gTnsKajJoJOB6sNuhLLbat1/cscuCNvsW6dVQK7lW1NfQQbpPNg4f9wz92DQsVcgOzxavw==","shasum":"581bb971772e9c7531c0a5fcf6f6b5da6ef79b3a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.7531cf97.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86mCRA9TVsSAnZWagAA2jgP/2eOxWItzq2TFI1bvdU5\nzlW9kXyT4SvVVZ3bFcJths9RoKIgox1+EbibY63ZLkqAuH+sZ7ocNXFyS9cq\nuylzRwSrCcxTW5ESO6/tDZNgdpOT7K3syHev06k37sdmisKXeMdtxMLzongz\nwVq1WWrGSp9gBAqjEBzgSS4a7eHQpQbRIaXDuHhRtHbaCos7cqiu7DVTfGSq\nXEGHHvORqeYqIEv1OOQixSZnRwfYQSHv5fCaOU/yhISv5c+OSIGFYjfjtxXY\nkBEvZuMGQsYHgZIoUjqYCoZt5xzuwkIDZy7kDSPY8JshPrbgNUiMMfZll9nL\ni1QBExc+VYV9nGpEKv198YZLu2U/Po0RyJWaeox5d0HH0fimXTxt5jv4bq3m\n/81g4zMFXQzOj8r0zHSkp/B8AlHFZjO8TW8C7g3pBqOaKg2UrXwyjI5a4hyD\nHzVnqANXBlN+s/1xaupxyJUeoCp9vOD4TtkVeg4H9GhJ7BhNHE28Lq6Da6jE\n3Za/Whm4r/1xP1EwLLDmCJSy4HqUZYAG/JEJtIuLCWJDeQX+3/k/YuPfG4Ey\nBxqbGjZL3M5u4Hvj4jzHGtI6RzpGT/Vr2I2CWggYGOxVzEkj0uHc/XQaBkzk\nvwDUs0nC1MWm/20PqjTq6O6Sa5fTuP6hB0v6bQofzoVC93TyK2Qz3bKy4gi1\nvGXp\r\n=Zb6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHweZkrY9nEgf7rhhH1rrhxKZyI3XWZHRhp3iqXUYAixAiEArM4omVoeWNasJAjcQxQ3aeNau07BEK0D/VohzmknBuw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.7531cf97.0_1629998758506_0.32307555661167653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.3bab26b4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l/WQ52ohJTtxYU7yvJYKP6P3Jy+NolTtEv4+RuagbCOYqtyn8iCV6qmOJHKQ02TjF2qSNg7ezaQaZvhn908Ziw==","shasum":"2d20bc11a7e675309448548b785842fafcaf325b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.3bab26b4.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtHCRA9TVsSAnZWagAAAfAP/3Jn/XBfVfATxPo0KtZr\nQsui1B4v7m9P6qgOmVXe141o1gBF+ne+pt1LmU3cc1EdVdyASqWJHdfZdn3A\nKUQNR0x9kN2rtFbl4u25QXzq0YegXWUSa1Ii7kd276UlZF2T3g2wD4EN21Et\npoVEICCrMGvGlGtdVTUucjuxv/xIB27BzCTsFNx/rVE8eFg0Q+E0RfhVNmc4\nrvcD8gEFrG2BKJazFcriYrHyVnM3jag2kuckfqOPNWNq5TsbvJK7l2dcDPlp\nHe9O1nbqGodSyCzlBeyw2IGXDWysZ1hJvuzfOMaOkWWhcoLpltpDSq83yEiO\nRgAHqDv6yZiMO82iUC+Mk3MOA5KIHsndjDvECD3ovCSO/dBIk+UyRhute/ag\n2cuFOS84Uhd01DR355ySOTddZ3UEVOP0NWInBgqhNOdQg8pJfpYAGZM5iM4C\ni1QUyJ07nDkQn8+tJ7ZZZ9Q9gWRyA6Kl0NwzZnx5ncHEs2KahQZG0LuBMsSP\nh7sMqjNyi4dRi9GJD66W9zBrz1ub+DjX7ZhBIfHEHmqHE9gsrMfIiRbY52ed\niTznUceHzC04An3Dn97EdJomGL6xI4COXB0j6qnsE+4JSZ8iAGbJFq6NwYDm\n7v1cvItn8pwTmLOo3AvhXg4KZLAscUNDEgNlMFY1AyZoZmAPgUFqeCV77VQo\nhqQ6\r\n=4lUg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCclzvdobxE9Kf6jsvsfhponrGst2sjOD8K5wV1/mCikgIgOqYrcvnKmgmUrrcSkJkDPIsj7YQYAJoaHfK1PrJ8XyA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.3bab26b4.0_1630014279229_0.3674714744378329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.fab48bee.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3IoajLbo0rlE7VRcN+FmXYEVd3tH1O+w2RkDd5necR2NM79h9q9wpvgNGddkZSzZt+tWMdiWq5xleQng9dKhnA==","shasum":"b56158fa2fa1e2e22d5a22e034df2b2787e09288","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.fab48bee.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBChCRA9TVsSAnZWagAAVzkQAIwM+bPGqKpHWpzL+YBE\ng2AMthDc2Pwg1jTkjh4xZWFBHQ9ii6yHIHQn1QCu+xn5STOpvRUi1JVo6Bmd\na+lc3PzsPU1lClP2/9xKtDOYT5/zD+wio0hCFJrU7yu4debjMgeK8Hcdxhgv\nsuA2Dnuvc6CYPdb/86yENx7UbsWfVfXzqeG1pYRRtATw8yOViRjJny3IikeS\nPuNl8GYlufq8FngG/XPgJZANTbnnPM91obJU+8/XkW9llHEoGa9lBQFpq8IP\nKdKWdrxRDBiXbeAndR8JnOs+6nWotP4xTdQPj93q4uaKoZaVnWF+7qB16h15\nH9Ia2t7mEDJsMO+3xSpsU7UAC2F8jeIdbBqaHfg4HtzXrqtcDa29bqGE+JbR\nGqqXilloXeNSgoj2USEAaHFroQthjlP/ueVeZXP2mD/k5gagWcuYVXqY8kVE\nKaQVyjKwDgfLoVpK7rl+Ac97bvraG+6DYaPE2Rms2c3a//RECWJJpeVZXqNh\nBWl1H/L1g5o7Vfyi2m8DXovPWtgFQ6q330QtpSSfUhfjTQFU4qYLR5bi0Vkk\n+wd8c5e7m0L77hA+r9y5d3uWHURWrKazEct2v+cY7/RXo3Ai/iw+iN1XJard\n5jk9GWtayr5uBP3KIZ0YsOR+zCkxmGX3qWoesG47weABS7fUqXd2f/AmNtNj\np+fI\r\n=9Lc+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/QJLO13fouwpU9SAKMLCA9gZVeA2TMVj1r8jEUbnVwwIgBTiZds+pMfTlHeKndG1qT3y4TOQRM/QATkKHeTdALVg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.fab48bee.0_1630015649473_0.8446572361919813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.dec18df7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SEot/lEDAlhi0rfzjkmlSbExbxdoCIWgT7mgR1zJjbgFe9e0Pn3FBcwXrxIaDCkwh+baYNLXlIrDwcNr2XtlDQ==","shasum":"d410a5e7cdad32fc0f4459210b7b698a130033f6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.dec18df7.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJa3CRA9TVsSAnZWagAAkr0P/0qlygvbjyYLdNU+GkJY\n69MACNhgjm1gBScpicREIhhFU0B2Cw8SD4CW311Rix2wD2JwYC3j8HtpZOVA\nNLzyH8CjXBa3fbPr91NKJ4D2GEohI6yl0NfNPhso3lbNbPQ40KiGMmQUP7t1\njnDLx4nNA8aiv8gxu5A7cBNnJu014K4j+l8R+vdmbuI8cFy66KRceTOzOP9x\n/d8dd1Xfz2CBf2mrSfNWR1d4k+l7oqxtrvvoLw14bu70Ke9yUEf6EiEMIwtt\n+vxjVU9opbp53LPt0DVmvqaJ0ozzh7aDYsdcZ5s3WpkdWQ1ddkfpXF/y+i4k\ntvSftaZQ8X/rC97QbE6E4+u75mt3ZWOB5YWrkK1iqZikZt+Y9x78bWUMQoEw\nr8KtLp9u0JxUAnzaMDUNxJH7ZmM1LO/oqnq+VJohPNvhN/AzBEfdgRYXRWdu\nO5306ITGLHQnuMqRJrdTLC2MPSgh6+VplcyEi5m+Sm5H5hDwDp8kdMGYUQ97\nYBARFHuFMu6azGhUcHt3JRFDHyk7PWEGjcZjzlBhiyXBrnnALMtJTPyNSp/z\nr3KEAhQCGgHcKJw4vakUs4r/7A7QaehBhw5OL+diZq1HrLyVl6YpNIpVMTGl\nRjDfyMazoxFlNxSmbYLSNSMjEtfjrL5flNovCMil+xe74Tyj8O28id+BFkc/\nmerh\r\n=GKAT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmn6JzvCEYlkzDXjKxQoq+4YI2PFV6/TBgOiGczAR05AiATxdG94esmi75gvm5PA2ixOk9c4y8HleO6fK1E32gHDw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.dec18df7.0_1630312119314_0.942287830766114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.61fe5b17.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yqUQHmitwLyP/jcDartONXhozh+3baUHgg8fOvI9NFzQgP9aibwxvX+oKQKA6vE/hQAtQDSrCRcuKdUDeKGYoA==","shasum":"5ce9d056e4e232a5074c4913cff1ef30e3085bcf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.61fe5b17.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFdCRA9TVsSAnZWagAAG1MP/2v6PZyaRcThwLnFimwM\nVBlR3k7nrjUo08i0nQH1AwVHnuYGaQ9cAGxMyvunVfuUrOOAX7tWCA6q9j6y\nsC22QDwXf1M+5bLRV6o9Zld0gwvfnhJc55Y7p4ojZYVQsXGNuK9vVZWa7S8r\nzp7hdLCJ66fwweJM/EuDZjX7zPOzt67bvtixahKk85uxSEUGivzPs5k5Aeug\nFs/KhwSV/SmwZ8wLp7KAXrnRAYRsey0mMuiMhA9hjxGJLa6/M90zAk58aR0z\n2xtA5tOK1BLrn7/v1oVddtYdxShjSu2OyBso5CTax9OZ//WHtU5csWlGFtrJ\n+Tg7IngOF5Hm82oT1Vx7M4ujjClNg3O6gDYPxyzOqtoc6Vj2iYf7+KuQfsd9\nC7gLYeEhdQh4uoxtbVzO3TOmVbMGHsL8miXR04OPcjjWBlUvFfDZ3TpXMYTF\n6f4UCadZyavlCfUKe/l/TJ7vW/lK8MyTs8UeoMVk2St2fqgdIW/akTOkIlXO\ndf1T3xwBbzphlF7+As3HiqV3ERLfOfnhK5FxPPGL086KM27Sx/4JxzXCy3wb\ngYR4/k4P2JgNUE16GT5GrcWXL5vxa8poLYaRIU+wQIUO5SOHCsYUZfeBVkKz\nVMB3g5fRHwZoMNVUKgn25jlnUxVxilc2LzH9d0Nb55FmnyOeEwJTJCBpoD+G\nFAjj\r\n=qDpK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG2MVYWq6t8vv+nCas7mE7PuLAkTZ+3M+TlS7+0opjKQIgIbJLnjiihWHuWQCit59l0mlpNLrKWnAsIeSwQB539wg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.61fe5b17.0_1630351709297_0.1334728541719412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.a8c31f54.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XnYl8tRY/HVt0VRdnhSn2jguNSrDwvBUSpy4RmSNAsZVDa5flXhNHcdmfe60wbI69sfm1CJqKwKcWv1Wxnuuqg==","shasum":"dbcaa2905fff6c3ec5ad4bd3950d2a437c4bf2ba","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.a8c31f54.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAXCRA9TVsSAnZWagAAjuAP/if3uqI3OXUny593eTfs\nGQp0nkP7sreDBwBwD7omyje6dwKoYc9D7ruXIijIXRFJVDLN/hrraylieIrX\njVgnpdI7TI1K5QLiw2+k7tdVCq4BHde++tl2sDdog4t4vray9qjIL0kYAI73\nQBIFDAeNwiV3GQSccyGS/iLrZX/vLwtqrMavva+OaxP60jhBv1Y0DNVOAGzO\nOyycExD31AztCZPNRV4O1Yxa/5uQcKGZ+BItMxhie5lBCzFTU/618dH7CqhY\nYm/5Y4lCSH1+4bGygaAbitcNWl4YVfknrFbDlyoiUFyEk/9Yk3Q7ESV8wjqI\nCz3nrsXkZCOdZ5+bJvtzYk1zMDgpTcgETHq7ma9qJTP+VKlwNIx3MlcVVpRY\nUqBlCD1MQd4ErPqig3tez8T0HS2d2lJLzsYiyKI7y4pT1rrrXm4TlBhwM+gb\npcTI4UsvvU3FIpYN7fQ5bWaGiw43+luw0QaJ+obk7uzIvikyn+StrtL6Gtus\n1WIKIqJ2/2Zyi5jAuZL4J44WUYsoHr90ZxHPNfaCfCKy4lPpppP6RaTNTRhU\n+YZ0KAma1NCJcOHfkmHArQBM7SdBBaPKpjxTkgk5UM2jl5XgdiWOBy3xUwqv\nPFLEfEovCpPvJ91tcGvkFhcsUTpBjLfRT2KMCMsz35qR5usPxICAhqeFU4Gv\nFDTt\r\n=dRFJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpFqc5lyfbEKYKJGOt4ZxlpkjjCHmSRvDMu/UmqNnARAiEAzFg8iQIK85hcpNKfup2K8/BWL/SFJSP7mJxAqsDvucg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.a8c31f54.0_1630355479643_0.5727070823732603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.a096dba8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8o3JEkqiFOBm6UcA7T+7EHnIfSpdjsgvHXCQfDnOJ7VJdr3+kmDtkeSeCrun3hQ5wEA82K3yfvfL/QMJysKwZQ==","shasum":"47fee938543ba836ef86b74195bd93294aeb405e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.a096dba8.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrCCRA9TVsSAnZWagAAuOoP/08DnbvwSrKlwCNfEAfy\n0FonQk9S+ixt7+ZA1ipWW7ZAcgtm3hgiY7fkFo01ilNTCqc/4HwS8Eth/QqF\nBxTsr5PHSRDlDy1FlRZFqofuZ64u7G9+7XVUnWoBl08To97lwwCdKfxy5Qn1\nW+7aKXkpPN1Buq4Q426nJKffzjpEIVf/locbQ3bKJZlS/JG0FLhTIRtqqqHL\nMsHUU85eeQQdeKbl0Xq1RHYy0agz1KCsonUzBX2wCzNjyWhXiMXBnqqiCKP0\nFJdH0OWK0fqxnR5XreaJCaIPD9kskq8MeJzEE5z7TtJpAw99yxOktu1YGJjN\nokqtz0L7ypkauVWDFKqZX/KRCU/lMQzlIufDpwPzAPxsBC84Z/z4F+e7ltHJ\ngLKlrLMpUi6mnwZTCRcP/R/FmjuaRpMFbA85kNDXk+Yng2cmvRphH3OAcRPL\nmHl65+UPsCLKvzyub+j8vwQvZzYginY4VXk+DDkPawYTlZM+W44EgfjwHByX\nbp0BPESk93YFdHVK5b4l1E4F2TBKF3GRX2xd71Uvl70kzZlTU5kjRC8YmymA\nDrISmjEgyxLHI1+rwqaYlBY3WlYic5bvrZy3Cfc0qK4ROuiUya0feUl2dupJ\nFWreDI70F4NjqHi7fW8ZbEWNrZ7DjLVjq9XrEoRU7Ncuno44KE3E6TJgycpm\nQN9m\r\n=4Q31\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxgomBNagicJ7iXNVQV5aJDO8xZ1y85fSTVZ6YML2HWAiAwcV57p/Dh/p6R0GgG1BWEBzRKC2vNic4muerZKdL3zQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.a096dba8.0_1630448322208_0.705573559412324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.7ec04d47.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AJFUYY1HBl/9k2lpah/okaG1xkT0vRD7eVmGvXlgB4/vlxA7k/dWDkU7EkJXCHSCHxgvyB/6BYv8A3q3HiBgng==","shasum":"75ece90428a0ace334a7e9ae4fd45caccd4b973e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.7ec04d47.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1cCRA9TVsSAnZWagAAhAcP/iOEI5DmrhRPTg7CwKZ3\nNupvY2k2VE6W+XxKubbhB9ZkTYld/QDc+3XZmkAgjvP7/nbnfVNAAQp2fvrN\nvtRx5lRq3KQIfBNUtw2JHGuUTC8gqkg4qMwCkvhxryxAlD+05zaT9U8SV6dh\ny+ZrLAYt4qB32NO+NGP7cd30kSsO86bRYRzUIYjRWsK0nO56L8S8/S8EVg2/\n4dRn8VkNbb2+fKx6qoRabXX2EQEbBfaXh+zf1TXzPp3vbdtEMM4CS5jjx9ow\nQHm0vui+m8/93uv4xNwHtVstfCuO4kP7vTru1igTZtMBqPyZGIPH1mhEnkaI\nbLopYfrTh+1Mgc9Qs73MFncz5365tCWgvpz7RROimJ1KHKudhB5/SSZvF0+j\nx/sTRAu9MghrycjuDNGV9aBlJ1XYslt5tdlu4ejylns/fpUWnVUijlo6Q/nI\nRbGsiJ4djtITTn7TTvOJ6Y1VNLQ64ku3hqpJzb7DcWcgBPZkQ0+3511ZqUYm\n+ICuSKamBz/+PH/gJZ+wdJooUif8AJDEXsHa7H4sZSA5pbDpvmS3iei+HPhW\n+m6hqFbel9yvl7l8Ot//LKduyi2kUzQF3ZHup69gRFSANbXHxCYGQL7ESRiG\nzWnbp/C0T3prdKXTPRWijQypeuiAkleMc6/G+amwLBxjsTh8E+DzMfRY+QBL\nxfVR\r\n=VyhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT6ohpNOqDS4wxezP0xOEytHtuQLU6Jb41qHH4oF8cxQIhAPNXDqKLOspqz8nEY5EKXuzlTZhA6A5dn4hjdcNx/O48"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.7ec04d47.0_1630625116209_0.17183370953016674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.d00b098d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8v/1gY7FDaK8ZzZ518DdXiOjB6WY++rC3nE6bcNgiVNgjA3Mpfsxa9oQuIMP4VgaRM0VNeRmIFhLKOsnKJ0D/Q==","shasum":"e83c3c744d3ecddbe5991daf9dfb0cff4b4f3fec","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.d00b098d.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMGCRA9TVsSAnZWagAAQOYP/19+4MIWFdIHlnbWzWM7\nY44Y7osHMnvZT5gKXrVq2M7qyTAdIBE+S/1Bb2ounsDVAVdAkdq5+c7uhrjI\nwGe1QWP6zIz4le+RltBJA3b4QF2ddgAwhO6sMBCsBRTF02ylPhCZ4BTfA+vT\nKoXt4KyFjElqrji5Y18fZ8B3VFannf2Z5QZgm2UJGrk+ejbQ9orZC91kYIJ7\ngI9hI8a6RhCqjvEbByg5+YD9a36LplFnKiYkBgeiD/TdHy2YFlcvvsXgYcmW\nFEsZoDqgZkP/qts7hmqoKQ92Aoq94CVIRn+zKe3el7/yizEr6JO7imrnovN4\nYk6kAlK7KacVP2CacS6Yr2NM5WyqPTV377Dm66ctRb9capXHgGLVrlz51WRL\nCRqQrlSwn+o+4L3MFY6ieP89oosbIy/6ioy3gdlAzrM1KmxIMnTTqZH56xAi\njGP4owT4zw1fyFvGLz1U5kj/jEGl6mMfZneNSmgIf+QdNg79oVOlxMkKRSAa\naBxEpMh7vspFJWRJoYOPprBaYD1wpBvnSCAj9DT34uYo53g58NW5Tmv/1mvC\n7q0HGSQj34ej589aveGTz2FccrpZ/QzkdTz9yjvN1/GgMsxMzVPgIs/kSNki\nZaXeNWbuiKZDxTwSvsGmibP3q5AiHn8tV6pzacGRu3+hxASVqlx7szyZyI+3\n9dMx\r\n=Xy/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCknu5coqYvVVqHKfBxRkMjRyO3JMGns/1qzmAe6zj9owIhANSYvgMCe5KeLFMyJ3vIZjYvMgGXSO/Uhpsql0oRgGq5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.d00b098d.0_1630704390079_0.024867771785941795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.f29b3352.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H6zuhe1U72wunnJYv5oNfWpkf80kDFn2HYZqKiq9DYsHChXh47AQ7/synjl5klwrXJ1i0STCz81GWJ6E5E3S/g==","shasum":"fd2075b239c20161d2e211b6f583699161a84684","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.f29b3352.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xbCRA9TVsSAnZWagAAFM8QAJRFYx+leXOGPDFfR8GF\nO2pXFQTDRUo94S5VJAJ6oEhvvsWzuhvk7ER7GzdGqHFthE1gF0KkOV91zsme\nmYlp+IgEu/81oEm93pUzSkZ38oD99hbSEIii4TgLUYIKC/A5o7pkmwHRWKAj\nseWJ0dm3l1NUmcuFkl1UUc/HhjoLlxWgvtVr0mF2P8+31+1Zbcj91gGnHOy3\naWg/D7tGgo5jdcmhLp4MuC447BKFT65FzBrHf/0YanciuQp+aPzOI0FGkRF/\ngY5U9QEhYJyMQrcRfYSdTXckaIwTDi/dFJwlDKM93CSNFtzwJHYOlgIlTmtl\nM1Ez5A33qAWLJUOgKb6rv0TA4dMmF+ohevZLK3hiLCZtpvR8DTVV8a0mRFnY\nlvbw0nCnVHK3hkhtY2qqEFXoakI72ZM7lAptwVbV9LvGnwYyNk9rKCEcZfZ+\nSypYS2UF6pPXlJHiUWx4NHuVmnpdlP4vJUYzOPXNwpOpJu9PSMxASgY4sB2d\nlij50aI7lP7IcKnsi3f3YTZ7EirJpb2JhcNBm5FwZqR6G6mRaHfIP4Mv6H2S\nwGTdeI3r8KLc4ExXLiKe2qtm5qItI51y1bMWtB7Z21KACIZXnm07I64yoBqi\nIGZ7hUPktqMNUOPm9nB43ZGK2qrQpziYUGqwGKTjV2hd5hbF4jTLHtHSkI2s\npT/W\r\n=MrNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICt/BYq156rOjntGLQv6vBzCK7T4ACX1mGtNwHMsaO0kAiBNAdkTH66NLVBiv2D9ZhPCzxSvQaZLItmHqOgwI1D9mg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.f29b3352.0_1631038555575_0.6625512666945683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.4962a163.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zvpEMyMANMIDJaLgrl43XFQKpxOTlxP+tqSHVf2peeanDl8JS2f95b4GFCkbsqhUR4I2m7NAFLEJemcqpE0Asg==","shasum":"eee9cc04241386eac79905010a4d1f2fb6be638f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.4962a163.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tmCRA9TVsSAnZWagAAJDwP/0fF7nh3uxp+3k4A4D84\nCZnqKBzEKdLa+VYJMWznWt7HqFJffQgSpCA5K4kevHPHGETzuIGJooTnCO4m\nveKUPUTBd+c5BF5nFbIXrydeqRC5N8jlLWQwYQXKeDUDJWCml5ZZ28DYSQjS\nCS+v+0ySjlO/yjve22vNwjxL3W03DuQs5nDU4viZVRSFqHKN8HyrzG8+xGwO\n5+WniYlPvh97b5LvxskFSZZQnRcFvICrEj0S6MpNeoLWKPc0QdOR1SnPZFGi\nkxozwC04zvkNWMCM7La1/WUoH3TLwAp6bWcGENosiD5lx03Yi48ynaxdABTy\nbdVPlCiUBx3mw5j1dCQ9UPTgQ1MEXzVGBSigi6vdAcY/bykE3v6HsA+RQ2+a\n3D7hHCxj0mD5qDqHVH1woDHh3kIoBFgeS2dw8ADjV8A2ITMHwvCtqvtW2Px9\nE82Czt1ESi5PpPRCIV7AE3xaKQNHYbwRFq5aRTRhAZTLhHN3PKhDwGa9i+9m\nm8CPyibmXMuwBoII2fUzfv8F9yzITZ2zx2cIcCCbr0cSgy/H0Bx/4AlMap7c\n0+CYfSQY73m9M8JYps7aZAaop8TxjrfymmCHogcLptUKupyijK+7+t6apuiX\n3tGlkfH7Xz3yEHvcJJvjaBB5WBuLA3Wh+2bAP+D8MeBaR1g6leJ1LJTl37pP\nrusR\r\n=QpnD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID88fKA4LvZ6Yy0951YKXz4g4jsVdOGqhYRRibXohQvxAiBT5Dn4c1SbNN3tIgp/dnO/+LOb6M9LYNyvVl+MP89pxA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.4962a163.0_1631058790064_0.836496160956778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.33102bf4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3KXfbYFBl7MzzruXz8wEoHh3mcXBkYoy3Z/uib2Edg61poJ55MnS0yJJPJ4TrqAQ0b3gvRzODuDwBwzEM9aOWg==","shasum":"831c357bf98637e08d7c0abd795a206e4c716552","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.33102bf4.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAfCRA9TVsSAnZWagAA14IP/iYharV3N7Zs31NZRMnh\nBo6ik0bb3fQwdEXf9xrwyhtqH1CyFOuookGnBYIjMZf2+tFBgGVu9poHXpLY\naub8Pou05JHYNuLO8GY0Nl8J8YK685HasD0Bhd2TWQOlaUOPlozB2hDpInFF\nCeyMRzoEsxR/T8JOr3IyV9phnWMRs68/NI2RlQzcNc3qV5fEoL51C3/SC6cK\ngYfOrOepOc5H6SGRZXTgYrAroBjf5C854VYpmtrZd4V6DfXcmOMRQ6WvNb++\nYXBSGZXpbr2Xztvf0A3j17zcufZ4WiRRBQ3suL0PxO4tMXV7P2Yz4LTrZca5\nFRyG2+sgW3gRz15SHO5kBpeu3HW4PK7/RhplTRUQ6hZ/L3voVv79v9OURz/W\n8QHDmT63+CYtvsKdizoLcFGO8nxU+p+b1AEUdZ8ZTwrAMVr7ZQeKKYt/gZ48\n7H+uNKYICQRa38Jj2AukQPtYR+iL2K04h02SfPWg7WTrxhgKCPkkmmTInEGb\nQUr7gpHKa+7jt5PaVRBUDhzhT5EQRhVqdkpPOnXU+DqQT5P16RcL99TzfjHk\nXas6F53qmWujZKHJc/lwlPyYeUH4w9mKoDiWdgc4ZmIJHSGS0SI4Iyri5iIV\nNXTRZU6EXAsHt0/NbzGWXq64lTPLX/qVrX7dM1M6+bdovSPjnyzpMsFdKyIS\nYCLM\r\n=WtTG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbl25lsVZWxyStbD5B/jUARTtDUCqvJJ8v0NJ6B0bF7wIhAMDtQ4za9F6pB3i1PRQGt0QHXbw94Zmif+uzJrPK/pUj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.33102bf4.0_1631059999035_0.41068094575302627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.76c68381.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/ripple":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TRNO5ja9w0ZInr75PiFTZ72CWbHnipmg/QyAQfZ4eKQFAQ5nDJWpxh5MGGBbU8vK7rMsRJmxG6uhP5zN8utgbQ==","shasum":"94705a1eabffc92179517fee0a0d431ca505919d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.76c68381.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORlsCRA9TVsSAnZWagAAqUAP/RpHsYWB1g5Zpdsync6t\n0UKlq2sF3yTEOOFWMJxX+8ETgcJ+GeC/rHwXf3hlFp1wrCE5NiX9FE2xMD+O\nPuN0RaBdzZtZ7QeIaBjokg/8yd8jIuziNLwp1D+lHxs2/0usU3hV0W3GQkuf\nNFAvP9EZokuze+MYql06l7Lo3fToiD+BM6fCaYidrnK6ZZnq8CZyqzO+8KwH\ncp5EmjDUgU/hikZb3oVvsdxj5wI8XH5X7Jyu5vLRaSl39Edwx/1OIF3iyVCA\nSBYPyZdg1fjp8E0JE4cHSvvFibCUwvAJNVY+pvGrJahigHqicmI1hqpRMVL2\n2F9iJjNHbMNbVfGA0aWrtjOVyMohbHoPT4AuiZ8kP9hpq2EW+snSBQfF/pdl\nzAKTpPlecGiI2upSls4gGLhgWt1TPkxppTj/qDEKi5vC+YV5pSgEXnwjexCH\nTYxrLv2QdS1hSjZoXj0lTi5o3bTHEgS2yaDPdSQ0RcDCm7AXyUp74FIxaB84\nmlpsTNDrShrQiZsr59AOMAeWo3haAhJhbNU2tNXmXCus4bO16N8KsIBANrfh\nPvcp4903wcHwb2ZoYrfNoC/NYSx7rsvXdAz2OUddAmJ1nXKGQiFJK9+rUVFV\nvLN5dFTEByD2luusFRDtrdMBDTEATkX8qKx52c9y5/+FgOwJowkzSGX65fC0\npwzo\r\n=fjCW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNLf013zi7vqgbd89RlT9axdaVqtE+v+WTH16TLrzzaQIgeTi2HB3IWUWLT2jcKA9+raAcweoEx7qloNvbZ47+2aw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.76c68381.0_1631132012730_0.2400321150732514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.17d51f76.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/ripple":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rC6x5ZG8WBV4SK7RxL9JdDKuu9jHMdQ7XET72kGsm3/XHeoKjANhkoEzyzSvnD4mBJsb/mnbUIzlYpzdznyDBg==","shasum":"f1d6a21d0ff9b53ad75175cbb60feaeee756b921","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.17d51f76.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaPCRA9TVsSAnZWagAAgXoP/i/f+zb8/4G0XdUEFEvb\nuGuqJbXNJGIuSwW9APQpu4fKRvC844HqHu4O4zmG3Tgk7LRJhMAsvn9xLHuR\n7+e0iU4yPo4xDhFnxCK2vPZV7D61uJZNsvxMCQ3KkyXnJheMdXwsCtfzVuet\nyCMOKzjRMZUllxbvsuhbWZcib5Ao7990oAi0JDT3XYAqfn3I3uMRe9TN+gx6\nzMioMYMZPJrgmh/yk4qaspj8FVzYof9didls498ts0JexGw0anrFXEJ53ZaK\nFFnVmUAc2Q0gaVaxWkvoNXGeBlAzkwlA6RmKhCi6jsAYro0pbfysBN3ztHfl\nJSd9aZmdzZgakGn7u85xrgCJD+gNonubyZ59zl+3lVFnX/y6Ar+TYY8r0vEA\nHdmSc2LiFnDISjVUrRxlE93UP7jTbfK5J2gzdjHVewyw/mm4/96inIRNCuMM\nW3e4tUfbVvuxabaSqLsI7AIgwmq4KFotbnnMIOpdnH353hy6uYAiFCwkBK+1\nfgXx4kvpARwybJHtDssvmfkUkb146HKBWOmb18ckdNDCrzntzgO8LyZM49zI\noIwXs/O0IlSnRKQ98axx2VNkDxDV4QCsedLx2Mb5ZwM6mPcCjufNH75IxI/3\nKXB6FG4Bs02HOPK2B4qxfrXtgzRR+xssO1VVYkxVO6SBgL7z4k0PHOFNUM97\nmUbo\r\n=yur8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhOOM3dKJvUnA2EwclylG6/PWMVt/s4UyhOSj6q1vjegIgXtlaONrL6yPKkd9vbGWI+n5S7Wy/YtoNHQ+9oNjDC40="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.17d51f76.0_1631143567222_0.6898955607452422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e8FbsfFLT50eojQN7mKUJEoObQWqLl267QqTwOh35HX1+wnoYNJKCO4fK8zyOh8UIlIhBNyv2FGBRWLQgHaSZA==","shasum":"884f183b48091c191bc64e1cc1b64ba90ec29ee7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.3fae6c2d.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TKCRA9TVsSAnZWagAAqJoP/1s/c6b4/ycmWNGanmgJ\nO4QPGSz/mGLfvVyP7jHMdEGXaGQoFLtGBuurW4YCUx+SIpsf0lGmYDdnrR05\nmti5dHDs1OSV+USMVFZ/FBLBOuWfkvQj9T1cc1CrtOS5noucVo24849aMXeV\nLj9GPohLqPqmNXdTXN2AuS5Osk3aVBHtDEs+OzP/bHy/YK4M63W8f84K4YOP\n/mqtcqz/42251gXqM7dpOZ8r7gy1PhGW/BoM2QzOevCpaR4EN+KN7emTdjlE\nyzeyaXEkVnkCJDxfuTZrFd3psrr/Wgu0klnMydX5Rqh6y+DkaE1aJzk75hiD\nx+koN+7zYnFkbiFuxNGm3Oc/pN0Qv8aMACt1KvjViTyZKfWgcSheHLpEXqoV\nfBhs+B2Lqxvyo0CafO6/WKT396BigLdzale6TtU1jpuPrVxuWb5zLqCWA4zM\nY4s/Ryyoe5M8Z+z20Uv1pdwvrCyXjnuB7fyTOcjkD8CD8usAGYB38FCHlchd\n9+3cmqMdIArgPXHP2x6fcbx22NpKtOmKoFKVIWZBlkrM1dce/t4Jasek6W1C\nj+3+b5xr2s5S18F44yRYxB8M2t9Ig28aTPXTRJMnLoG5/VvdHUGVCBw15AMn\nGfRUHplFwy9fjT+oZBd+T15YPtu9ZiyP5rcnOZ5HYXh1HnCsgZMZBRdk3+o1\nMscn\r\n=3vwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoN3vD0As9rjL3p2aNiPlIsjVINNnd5DYS25BiVDkA6AiAhNaO1jo6DvtGicCq+l5QMznMhiGaJfYUmhyci0dp4dg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.3fae6c2d.0_1631298761927_0.8539635240139238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.f1958c4b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OMHMe3mL0Kxa3txs+1if1gg+k5CFp4RQBJhxGNGt9eFbV5WcBwwcemgMnQwFwp7Y6XdT4FKslqzFsnG0NN91jA==","shasum":"f74a57b07dd8c31c70a5682dc3d2e2b2b0fd4a2b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.f1958c4b.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6R6CRA9TVsSAnZWagAAyPsP/R3bUT5vzAeDbBe50IXc\nRkbCUsa2LHLTtfhG0PJ6e3N4DM8hVV4AJXpaV8QQOKAGxVl4CK3uZYyjUk3V\nrzADirDVjGNLkuwfeBQQgy2MveiCce5gYtV4qPuEueVnkNBok/dAamuMhy/X\nsHKrwxaarBtPsX1BTdO3x4qgl+D91xqHxdqK8PqschYZiQ2yU2bgilNz4SN/\nuJG+TDJLClZJ7Wzk2z/Z2DOsAissC24GRDf+AJWnWdq+AQFbsCpwWHdPbeAH\nOCkUUSX9cgj1yUjb3DdChzSZFpmG9Nkveanruz/j/zwpV9ws+HOiNX7YxGnt\n5Hr27ZDVXe50rOH1ihuRfb0XdAMgINLRxS8g8Di9ABI10hHJ/QrHjmGZZvY3\nCamuOftz3v/HKkJh/yXBnSqqOJGyXErStTRj2BxO6I6+Wnx/eR//L0J5m1TY\ngj4kaLoiJBQR4GJ3so/atMPQIsL2L2q2ef4cAsx7vOuXTY5fO0TBwVow7xMn\n6DbU1ybY9CfpBre5b+fq6xdgM0FTCMlZsyOvtU1QUJWOf7O18SuO0X3pbEMC\nWUBLZiSq2NAJZndZ8cVtBwgoziVEvSWZIzTiPTBmoXQ/6Z/EB8jIaO2cUlSS\nn+TLbgX2je65W+eYQLrTF2ewRjBAb3pR+sf2ewDTv/kOBHVdTVKgFlcvX3W6\ntgLJ\r\n=hdBs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCJlnnZCQ2qCVGVv74d1V+qZcMHgZPuoVRUVjzUNqZLAIgGl89ck8F5cu9r+/JTZ10rMrz0d07A1PmUFiSLGjxxJ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.f1958c4b.0_1631560825890_0.8055773157524075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-ripple","version":"0.23.0-canary.78abbd59.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yFfCs/zce+hE0+9/klrg0SZ193aXxgb/GfFvcbyNHuPOZHHMJNaNzwbZOTfPcdqcq28NFlRBk5FFlWO6sb+mZg==","shasum":"b71187162c2ad2fc832d0b43181e3cd768db91d3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0-canary.78abbd59.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8HrCRA9TVsSAnZWagAAIY4P/0wGGgSFZD8R2IzJ0fFJ\n8LMkWUQ9BrAKXzKkg6jMHXCA9Q/iv/TWlfthT+SQWMp7Frf6BNuut5PFQ0UN\nBKjc/kbc4Px3iHVSk3FLrERqGDObIdghu3DX2gqycxGYzLr69+bh5v7lhFeu\nseehStcLOoNUreVRVKWxAe2b165u/O1xqsyVoowRIuSQNtcuQv0/bLdCgwvl\nI9Vv99d8wfs/x/V0th9zHWVHD1LtrzgWuHQ5ZZ0qu6CYKa+Yh0LrzMuOfpQI\nLRyOVqA9Y9a/JdSfGJByvaNc6Ni3RGt+h4bC4+Geu81JakmGDR7wBztGGszn\ngWbwLD2E96fNMDgAY+TBugLoab5Kc9Tl7vkyAEwkr8J867eUozwZkrDhEd0U\nz/hgnMwz6wZ1jK7E5RP/S+30DEHCiEKZ+Dd8BgMM3GgWrJSGFUcYwzlYDaax\nDafzM2rZtaH3AGQoq3+hGBpIL40inryldYyvyDCe6q7tw/KhqQ83EQmLBS7U\n5BP60IaU5lbz2t80bPSK4NF0w0IHWRtt+Z8uak3gO4pYhQ3cgUrUC7+1+GmW\nw80Tk3m1/QPJJltmncHnvjBvRzFw2s/fUn5RtfqaNghgycr5lPtqdZHYmAXb\nNcUnVyoNnGzdJvs+en1F/ovnF41igdqHNshv4Y6fYCvrOm9yYyiHLqixymq/\nogws\r\n=Et+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiwLYr6QcWKp46y+iGsEr1sf/79uhO0cYy38tYq+M7JQIhAI67tU9bsAihlpB8WgZc3t5dyjc1q0keMnltqMVqb822"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.23.0-canary.78abbd59.0_1631568363733_0.534409775292221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-ripple","version":"0.23.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-6S+9/Zstb/N5zh4DbTj4gs1+xZ9vPed1HE/59GA9sZ19pJPMgh4jPapRI+q3Uwl6o0qAKL6cZ9nqoKdMo+BTNw==","shasum":"9e45c064097b2f3be70d83f4efddaefb4faa6359","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.23.0.tgz","fileCount":22,"unpackedSize":98660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QsCRA9TVsSAnZWagAAgiMP/3qUdz2HWfx0k0nySJOF\nrU2TSsV0mwCeoA6xCXz0GAOu8NMf+i+6BL/fygBixtMHRY4ghX2FWoJsU2H2\n+KOUZzekqDYDoHXJi6vBwubjSf0vUGNwLASJy+prCkZHZknHv/C0f2yXZWZh\nqZOZ3CqHNRljTRhbPKZLOVDwE2M4PCLeCKZCANe2oxdZIp313KzQ0c4uRP0Q\nX7lM16DNS/utrU0I3HyY8aFIkFlan89NzfCxomvG1wkGut4Od6GjUYPBLvEn\nXDsR2M8w/74h5VQMUdmA2wNWCpcZOiWSfqGqqmCDwW1We4wvpYVMGdHLYqvQ\nN0rAU3y9AMdiWzv8f5oj5wbC12UegTYjTQ0G0Balxv7DYNs44Pxd//FRGnPS\nxrrSv2KkuXuxroxgyv3PEtPPmyIyspHoPuBwPWpX4cVzP1DRobzxJErrQhi8\ncjKg5yOiWbNWa+xgUczIOK/LYKKMExlFV6BBtqPnppLFayEMDRVUJjR34M8Q\nYRzqOjXTdLXr87staWsPnC1xC7z/OVac1Nephh+UNt4nnUxPQzv16tlQz7/Q\nhNDqZ2ezY2v7EAkfMj888B9kW2ZNiqxyw6UPsqNF1Z+1SG5T2OTWU9uD1Giq\nX0J83i1CQNHPtZIer3ZDJH9SBbEKHvKBJhopqXG4e2sxGWbrqGNgfCWqwmkz\n3mPW\r\n=jh35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv/W94Nn162fNL0o6554khzT2KqfjLi4gYKp01pSNeAAIgRa3Q879RL1Vc7REkzq1FcCmSfl3tALDuyIcmLnCMt1k="}]},"_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-ripple_0.23.0_1631568940642_0.6980842984831952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.9830d665.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eEpxbvUYbIeGLt1AQZtPRlekT0fTVIItvCCLyiTWcPa679LfsrewRhPDfNyAbuJFkDC1oAPjPg7bUCa2bprGSg==","shasum":"5367aae51ef8664fe4a801845620e12314d358ee","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.9830d665.0.tgz","fileCount":19,"unpackedSize":75974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8R1CRA9TVsSAnZWagAAPw8P/i4eKcJmzyoWRko3zp6y\n1ZoOOEZ7hoABhIZUUcmOqwaI00GMDNDm1Y8XI7ai8ZX7HA+gl6/GMOdxJogF\n+3JQAPbxy2EBCuDE76kcC2OLTt2v2c88kwqP3dCPu2+lxw2vD7ZfJ2QIJZ8U\nJIHo61NKV4w5UI6ed8wCc9CoHG3194eZUemS5EssqUD4ceM5Nca8ue3qGn36\nyz2aMvFfZAgHMJ39fJt6My0xrDP+n+vPzHriTra9L8fBR8ZcHL23btNQzeL0\nJZbt96Pq4A8nx+zWRcLfWFyH8WQVmLOwujwZkbJS3aYszM9deznUfc+6+uYw\nrnFr9T/PLvEMOzG/eeFGD7zZbOcq4phbJPTtysKAR7bo7qkke/QBt3Z5Na8D\nF3TN/+/j7pEG9CQHY3mI/AEhd4zY0ls7swHsEgCwu5U5T6+twRX20MYT93Gg\n6xiK9vMt4+r/1Vkz3b53+jsZ7NbaC1P2HvJr2Av42h2GBTX+uMJEhkvfYJjq\nn+EXreV57k2dAik78UbbFrKSxaJzaOwsqtolLHDxS4ApT7YZyw5s3IqMggbq\nefXMMvus1k/89eryplw/Dv4wfh5vm3pA6PyuSCLadjLfhJCNUy4suP/oyU/s\nJTyY9UH26Qr1TykTpsZSxrSDxRJRJlHRSX71fpCj+kdnStW6IU7djH9pzzn4\nFOG3\r\n=Jc/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvuKjtXzifeGIXQnPr/e03cYdwpit2zNdEMmUstjQspAiA+rkFOyLu0+8/YJcXoZ+8Ta3TthexIijr9oH3oNzDGZA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.9830d665.0_1631569012851_0.1306337958935515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.20e2081c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i6yQrJigLoM4cKGyErzA2EwTV8t9kU6YFDkiAj+Vx2hz1UaaKXiW64IshKX4YHyGYTyLIGvbVnpJWjCB4nc0fQ==","shasum":"0d6d8927b4280502e2679e4d7357e085790c831f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.20e2081c.0.tgz","fileCount":19,"unpackedSize":75982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP99rCRA9TVsSAnZWagAAf7gP/06zxynq7nCFl7/zzjtt\nFIQ5CBYRg3rccP+rbw+Ct3r7VX3cJMLqPzPcmXiPJe9CW6EjGsGTDavDsjk3\nEYbPqwrDKIP2pcZvI0ETqIhyMo9qZQlzGR6Zy5AlaKpQlipZs+10LNaQ6TMx\nUnpTe6PgUcw3jespeYNck92GmLz7Mjv06zv/D8kYoSI0IZ50uW28pUihxEuv\nSHl0be8Ju5cF8sMgKiIgq+kOvEJkjv+h1J5KUcGITdvnhO7k0u8O7V6pCpUO\nL7nHYuruJbp1+2xkIhPGqXzGq2rON0vtYnx1nvb00VrnTucm5Ijze7eC85IS\ncJbrmSNtATFUUn7lEV9NPoCrFoXBH9P3IzO+GNA/wWzlQtR82plWjCVCL+Zi\nlzstogAR+/zOc5ENzF0py+JtL8+orw2aqCxFiBkL8ljbXhbcJF9BNfXfLRWC\ntZFVqNHJ1JyqpNMXXBaUpW2mZuaQMYiteBkYWF+wxryXOWELgRCAZZJCzudx\n7927E8mF82M2bIuVBoVnF36iPQCkWQ2rbZlz8nr1WbB+4vgvJguc4XVDzh8Y\n1EaGYTIEkSgejpdbmVgOHLjS00+1QQ1oE7m9MsVlsoW8x0a+Wa9Bd+D6sPQm\nV6oZ43+qUiJMWlxhP1kgwAHmXp8nhpX03lyDhaTdRjYy60kD2Ef+YnvaE6Fh\nfeMm\r\n=cp8v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiDYW0czjHPXFQoXVUlG71QDAlPyTO1AvPf1b+6kbVfQIhALvrEOIjZnZzNUewMvDToRNeo4NY5whwmOs7qxvdxnbw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.20e2081c.0_1631575915750_0.9339718254156615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.583613a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/ripple":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ga1BSoCBQvGX4eFcA0XYrbK8JKhBjSxC69UpMau5v46qyV1eZdUjcgstPZCSTgg4HR8F822tb2Z1Naa5F7jdOA==","shasum":"71dd1b3938cf997b20def88d12f7e9eb5b6a8d81","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.583613a9.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPmCRA9TVsSAnZWagAAXNEQAJ7NmNEgFYWLWTFm8BY3\nNQ73W6aFgRRmgRuLm2VE8RWBC1HDh3/fR5Zw2WRuz3tRWsHgIqUMQXtSUWaN\ngzaVCTKxJ0ySSC0VqqXSk8uoQVoAqf4BNwIBw5MIVvRqPaz0Ch+6tSm9lWep\nrFjjnRNMTSh7WMGoYAepgSdFa6Ff2biCveyLE8f0kFPDJ26TwZIYdLN5mGdU\nXBbmct3ZXWqLBrVtGHF3lH7z6h1aWbv4/mBQIjOuEjy84K3dry026kPnGNwh\n5pvLSdcmz7eXz9L2uyAOx8/tXWe8mL9ne7LOlJFds4nuVy81qPrKtjOHuAeP\nP5EpPfJfUc+1eQyT49aE3zEHeJns/3n0Cxi1e4G7j4pMar2v3nEZEN5WPCJy\ncg5QuszSl7tPt3PSQs5b/0p7wADL0sraidyy7tpAtMO0BZewMZJf+U5Tuuk/\nAIWuzIoe3G3Jk+272PVJGdaRG4KuL9MidBP9kxuuNSH/YzReDS1KkdXCYNwK\nVaCkvgssrIdUrJ1y3hJGHNECbWePVGhCYON/pV8igNKsPG3ehIHZEXId7e0w\nL8LNQIEMa+D9X4XrqrwzrWhF6ngbn57MPF3wEsoZkq1yJxPbovhjf18ZCHie\n7aY8Bq9WKjj0bmAHiaUdMpbIjziHsfb2hdxgPeYLhB2hTA1O5T/qAwxVmrun\nhHLt\r\n=a0Cp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3GmAVvDp6QYldxPL1rOPz9i8OZPeJs5rRPomYOQlJLgIhAM4bqkkC8IQWlOywLeV1BtCJzyXs7w6kO6Wrc0pVur8J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.583613a9.0_1631638502490_0.2046378961449682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/ripple":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f7LiANoFt7J/lQDKHiAbraEoklOhFW1rRuQMBS5MDko+7zHM13Q7GY26ovfr6SI04mLc0s+xAgfVaEj94NmuZQ==","shasum":"cadae30ade31c1109f3f0cbe16b557b68ac9435e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.0e1bd56f.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNyPCRA9TVsSAnZWagAAUWsP/3DOsqw5e9Bjeh5ZqzVz\nzKN7QBwe/7qN3NJ5VLkX7nuY0dm9SPUbbrQqo1j/NK9Lg+6PQ9A5WLTxYqrs\n5TT2C1Ogkm9fguYttnBxmlyNyct0oCytaqcA4dOA2W23tqayFV8G96UT6Vex\nYF/K37f3o3Ufd94KQOupnIvkbXIYOgAx5dNVSCnhpfFX2oWocEAKptsJpWwJ\n7ShdMYQwXrLC+47HGLu76MVoaGb15kUHOK0nWF9G00xpamBDHRsxV15RlsdD\ngD3NrfPDpgnvEa6BCJdjTolgaj+7cCGUyyxBcnqGERnc4K1ZKwmweajn5XVv\nBYWc9zcdrVce1MMBLCp7KfRGNubh2XC70OwAfF/STxWhatrU7Vs4mdnjsBrU\nh8XQrR9vXNhAv6im1xX9MebX5uxDwAcHXHL2QAArgBF/6rX75j+ey2dqMsSh\n6ZQbXVBPfBiNl1nvWxRVLlWLzM3et7iiLO7aEhjhdA5kvC5Av1fZ9vb8+qYO\nbImYG3Cy3+cylv6unohtTYCjjlVjS0bVH0zyKWCsaV5o8iU/xPw2Nn1DbLXy\nCp0nCRMpt4VTb7BMSdJLJ7BXFrkWkephJrsqOrloWjwOVnmpQ8TSbXfRXik+\nCAwJejt5KNTJuPbS9j5YVwnqYK02r79FTIq/XifRsmAmdao0rFxgXKazipx0\nQK2l\r\n=yv5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGcl5OgVZsYN0sGGtWdHKwdsm+b7VKG/e1AEijitiJUAiEAukd/3Z0WjiKDd7lYir/sExxixhEYT5k6edxSdSA4wnY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.0e1bd56f.0_1631640719545_0.0020242427329073553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.7bb1818e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/ripple":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NFEaekYszIOiPbDhXX21w+CSh5M8rUs2CitDRTZyWdU8y5esBmh0squYcTBSXPs75tsFSRoL0fx9G/blhcXD8g==","shasum":"021c822ab8d985b500d2645461fe4e41aa784d43","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.7bb1818e.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/ZCRA9TVsSAnZWagAAOOQP/iFZPBJ5PB+2kERH2q7I\n9TAPi5XxCyAa5kuKpzcNBzDHIpJPyG6api0D3oaMvuspoUSr8VW8EM9Qbn4I\n6orAkYvgMiIbHLDFvSG5C6v6wndTE/iIDMlkPN8J8ag19FPgsMXKqEDPCuxw\nkGSygQtROtix8CLmAzpmAGgMoYJ4gU0zshLbimpOmGFvwiweAOkYdopkRSct\nXuv/8JjLjSF1XNSgO9UV+Cso30FHWjvfpbWCWOiOTiyHMm1pDQ4OlTT+87aC\nq31CbbPp3F14l7MZWkNqur9KqKBYJOdQxixMDkN1YjjHyNKFikRk7ctf5dPx\nU6H8AGemYXCAqqTdGbNMLEX18fKOjdle3PrfhuGnbw87UJNFEE7MpNVRxbaO\nCWmb4hb2pxu0oewWmrOWBdH4pDEz34dRcLyLzQNr0yjx74ftTAt/ax5/3JVv\n5tB5PsVrIjf1lL8RhwEdl/XYUtMT2BmLmvDQn3KALrlTWhnJ7ULsDWj45CYx\nG34peFpdoihkiUu8BBq0jG7T6f9xRCjWkMD5fpbM/7D/CYkyuwxD2mVIx/7G\n17uAQXcLLGTo1mZ6W6Lo/pc1jIxsZa/g1LnpMB7hUYflO5G7zC2tDJE23V7c\n4n4K7zCc2/7ZGjYRFZzqH78UDWoCGZ/oGFTdgUGOhwoCX8Njy+PmAMIqZ825\nyw9O\r\n=sc5H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn8PdiySIDu6oL3TjLmffHrlBDyiU5/OFL3e+4V9XemgIhAPVNmeCOG4CIBZjcY+KjbA2TzkwaLEy1jx+ewagg/pv2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.7bb1818e.0_1631666137123_0.15611732948151724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.b5e665a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n1VeCNYK29o3f+g6hqtLAs/S8l8EPCLMK6VMH5KkoEkubK0x7xTcmGqLuQTp4HApfjndJ81fR1p/n0koo2fjNw==","shasum":"562afe9b7a3dc0f62913b251c52be40c1d7e8db1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.b5e665a9.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjepCRA9TVsSAnZWagAAybIQAJcYqwiYgzLE1vdk7vcU\noteO6NtKlHPIcSkC1dvJA5UZ5Ued0U3MZLxdJh20G2c3mkB/gCAE7dsDKWHe\n6PoFRkoXY76znKT0lUCt7qLOPbh0Xm9biLOPV2lMo8rCQfyoH+MsMNtbNZxC\n3B/RH1SgNTMH9iDrIKEjRUUGkQ8sIp84hWYiBfADbC4J9VgDFQ45zP87RMx9\nmvNOaTYoqcJxzwrM4p6L6LHRKKnvXBCGeYOWvvtpzZbPh1gH+T0dsi82Xzrr\nYcLPl4qGoO62U5yISmwhUqNoQapK54EsGBgchtHVv7ftWJoXjqdkh2X9vw9b\n02Z3Ml7OpFO1uUpzEl2xM7r+9i9fsnxCFoyH95bWXIr/Ub7rnWKs7ud+X2zY\njDXEkXoyp7aEP3m4axNAL399zEri+oHlq3bk3lBuV0JDQbEp53iawp5IXfjD\nBMBXjmRNE5yCR4VDeXvZhBpUiw4Slb0CIlIuuapXztm4hac4c1EJBwhvcwZK\n3khMcjosmIwlkC35AiTuCiSEt4eTwBdbTj8YXuYfWpifbOfJ1wAfcrg/3bFS\nAeXfx8YJec+ZEvWvPuVob+V6KtCbY4T9zAS4XTEfC4DMzS8R+vhlKeAH4Mei\nyfgkRitg9COCF6K+Hrw+MU7Np8/QzyfM+RA4bAFWDa60xqUQy+TF6qxVAJBH\n8Uab\r\n=358K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyr+lfVt+zz6ZTvymS5A8cZStPY2OR/JZ6gdIoLwWrKAiAKKcdRidr6WRdMlaELAdpQLGvZIhfipRYdEV4pc0jQeQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.b5e665a9.0_1631729576858_0.05593792887538096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.ab1e177c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+L3CY1dVD/qJOho6JqRRmSvfnWSz09GYkC0m7k2lA2hY6UVGWEjnEOA8cTs499WfMflQDaEU0nEcMe5c7Fbzqw==","shasum":"622c4c16b6daf82dd73bbc823414e665180c3396","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.ab1e177c.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8QCRA9TVsSAnZWagAA0oYP/0SUBEE/FoCJ32XsWqc7\nFjNP2Y4OfVyTJDemf7A8D8lLxICX95ZAdFgdhL1WTSgSRx+Fney3wBsVYLUc\nEsELtw5znPKv0doFKbiX6IJLfSHR/BqqlwXjvl+JZuzHJnHyLiBMEU9/nVff\npR+0lblsfatBBODP55NPjmKODHL507WgBTqcQVbvWLNHdhfE4JLeP2aYliMR\nP7y4yw0cpY0vaxLMg2PHnbtXm7+4JRKmDDbGlGdS7GhLwc/r0RUHzKHW3/Tl\naDZOz/xrQhaZu+xic8lrMdvbFvpnh3YtsTzP6C0aUWmCQPEhbQvROnfNca4u\n+iSyc6WBgisgRApjIoOTLsr4UutZ7xxN5HoYXuE2lYn1chmUekf8we2jgRnj\n+WQ62v9AIeyJHDdLdrbKXa7bhd2pOSv59PVRtrjQPQuIX/rXzJcaE1qOeI4b\ncysQm67FR0YkL6HkT1EX096cPiVP9VhOtQawCI972mEXMHxICKpExCN1Iult\nw4iBqYFMNBAlagnHFjyZ6OOASyoo3NXFMwZ3egjYA0Oh4qncFSnpQyXGRlS/\nztcKDo6EYLDhBgmvfV9jLjhHOQ8eqKIBCCfJRvnLxHgeoNqG3SW4NFiPk1LF\n1Xg8g4S6sG40f6qJb+S/AKJ1Dse43DHrPniu/xn/30KhrCeOPY2tHm/4Ohw7\nQ1iS\r\n=9Adt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4klxasCJFKMJb5jlhtEOMMPIVfQBZzU9flDPoFp/FwQIhANc6HnENmEwAcKpcxaLQXKBAAA1Z+mm6E3nKyf0Pne+V"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.ab1e177c.0_1631731472435_0.4027808537759332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.8dff8894.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h6Wyq+00rJz/vbRH/rk6Bhzv9JNDEStoeWs3RduubPLLmarghRevlP/x/efrcQs+XoOXJTQCblMhhS6w0jEKEg==","shasum":"4d3f6c1b376bcfb32b656acb63a32be45ee6fb93","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.8dff8894.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSlCRA9TVsSAnZWagAAJHAP/i3P6cJ6eaW0c1J5R3xe\nMP2mOmPKiTPRprcXG8sK73/Zve043bRzJTS9IB1/hElWKbYWhb2MoQcHBSNF\nNID+yFrljmrzyhAPBn8IlnzE0nnrgJawn7PqvTGisF1MBq909zt/nEgFkfys\nI3GhCLIJ4EaulHu/MHVl84vU/9FgLM20LqlP3Yp37JHXxA7LS8Al/qoIiOH8\n7lLr/f0zQHiIMX97VZThpfuGYLzPPCtIk8l0fAIk1flSlufqDMR5yNkBewDT\n6Bt54pAPga5UjwiHAVJsOq6RfF3OQFJLMo7VZWWF03oT+T3kV9uYoKpm13Rr\nNFATW5rq6YMQNCCQFxomFdQRM9AAS43AnjvCNdIxR3IMEcsSRIgIl7mKKr5X\nBzRIkuJGW3W4TMgiQx1NxlMZNwhaBTOzJJYAg0RzMoce6ksGCxUad8vNYQyF\nOd3xMqP6pYLfY27UtRN4E7GeR8QrRwxLd9xppUYbuZKCGWWtHhoSsEpbuFAq\nv+LJntZSq0nMvmwa+sJFA1L9AEvyrsiP2zF3jWao7JbffAhLv06j+/W55JG6\nUcH1U/ZGOPdUq9PqyVrjIGQuPNtZgtMi/k2T4KcDR2mRW9q3LLYmGXnHK4aD\nvhf5bufMqMBB/9rEZjRBruLqT2/vy3c2FGoCMM9dfE1oWT0XLwV4UJ5htmfE\nZ07M\r\n=6PT2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEIZDbtI8/P92ea9Wup7jHKYeG5ixM8LhVjTav9K1o3AiEAhgAuZbJGVAiBiBau60UiujXz5K1ikgcDsc0UX+ji7iA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.8dff8894.0_1631732901031_0.6396018013660587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.9cd7e927.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QU/l5x64uUVobXdem1tSx77AXlUt95heIoLLOId/3JXpNrxgmrBMOPvdNRgYXzsSO540dD67T8x3OBHAfdZdpA==","shasum":"9b2849beeadadbc549011d7b1574abce7c9e11b6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.9cd7e927.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlg9CRA9TVsSAnZWagAARSsQAJG12J6OoDX5GKgmIeE9\nsgvocGsxWa8Mqid39sUow8IpoYJQg2XxE6QwRuY7ivIgQUuLQgKay42+eF0I\nN2vcHhp/3Oj2Gua+5i88KOgmHu0jjEfBO4PX4zoi3CzV4ZDbnMDyUgft7wBO\nYTlutnVqLCYRiTDA0bChYMKYU577Ke4SYt8f+kUHsGGkXEFg9P/B35zI8ah8\nZFPKyhIL0tckB42ucXKO1OWqmgDTZjli5DnJwGVSe3adS5SbN5uyw8H13Kig\nF9yX3TXcb8xMhquhu7rY3yM7SXz9ALSwN52wrWmXkm8Zk85jiUdIHlmpW318\nd6AMMK2wNK0IPWSuNXc/R4hIoM5B3h18TJtIcy2GJEdpYbWIE14WIVbEKY54\n9ENIDPM6amMvsBjJ9D32/rq+uBIqd0QQY+8AAv2+FJVa9tezwur2hTjzrIab\no4g0Pk1OWDNhkU3FJcdj+aOcPM9mMIdnczNlRqj+Ih6UgAKw6lyCc8rOrdLA\n6nQBU1IQsv20m7aBRAqox7gMppaPsZqsy2bVF1fAPsR9NGVt5c6YRQsNUXPa\nWeOlmsX0YVOQfdm5hkdKdOxKgHnbFU2kr8htcy9UbGavsRZLXBe3kPVGSuNG\nMH+fy/EpMbvsdAnEnPkp56o5NMzCseNS6pcS2hSWdrfJSQUb0AEvZyvzFa7w\nxOhV\r\n=iFM+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdk/By81kOdfQ6Fsx1HlPzKeMayMZVCu6tCUZ1C4TbBwIgeP+LOsFMozeh7c8WNLEbB2Jz6KYia6Brn36iomsBxX8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.9cd7e927.0_1631737917602_0.7249416761697114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.a7132082.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vAAt2cOK5umIJqIPjV9tUklDqhSfNzr03b/isNkzLtv4mHiTCVxGntxzZOonQkv4AVKdlklauYbEybPw6GhEYw==","shasum":"5f8eb56e4154094b6ba3a700f7b21b90e65c8a53","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.a7132082.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQml1CRA9TVsSAnZWagAAqtIP/0J+JyRf0PpkZnBO0oF2\njhRAWsJOW8qlgUyhOPUFDer1Xt2zwxXan9xCKp9JU/+pRy729K9tn017jALD\nQKVEddqpEOc2XA8YGn54YaTJI7uVE+5/Axnld/Uo0mebkHkFkfPsP2mRrHt4\noNXGWazOc1KxFriH0OM7Sf/OkW/riFPNa0DWonTGLih3ihl7Zy+mKc+pl/F9\nyo4H/5o/jGH2acwiVoGlXhlUvhfWS3MsqhnJRps8YHd6vj+eA6J4ZrRsG7i8\nghLh5BM5fSsUR0kveJ8gtdMNK5WBqfEL7P1vB7E84Nv9HMxbT4PIsFg2C97r\nNEhSOtuewN7ZbVI9E4vhm2NgPyrgB1tN945CF4Y2OLmAeiZOGYby4V+l5N8l\n8hIDbbUJcGyiw2zTX9TYc8iRCmG6yp8xL74FlLk9I+Hcw9QLXM/0VM/NiNQ1\nBFlZsy0nhXWKSIoRIq0OoHBWkQgyURfpMHTWmUA3cKhonWXndKCBIiy+Cuwh\nsQMbJJd/qGa4cLmllPGLCJ5PwCoksjuP+knEHEcB6MfZwVrUMKOJ5SHRzk2a\nbhMVMzqH0DH1NB6vlgrh8EfgpKNkMfDHy8NSZuVpcv4lG40AWifLG3tdXTq/\n8qvfc2jU2DHOkDtkVougwDqMr98skbVyxeibQxOCZ2Z+sSDT0h/VfbYzPanc\nLVF/\r\n=jr7a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGdfOPge4s+qB5YySZWtP+hp5/PrZ1Pq7HSmK+a+LiNAiEA9si1eaD3QGmEAi8OcZKwqr8r4CQh0h1HkeQLjlUHdRo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.a7132082.0_1631742325743_0.06275030716372432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.cd9110cd.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EWQ/AMm4rxMp2RWO9Vo7lGreR4/Sl6QaEymS/GixBwkV3vnaqReDSxqXqmH+vi4DQMosz2B1HIrC2QJxMAbw4Q==","shasum":"c86a23b42561ae346e42283fb99ac4a582cca9d7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.cd9110cd.0.tgz","fileCount":19,"unpackedSize":75994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4KyCRA9TVsSAnZWagAA0YIQAJHd0Mh6xjaxZE8RSqcd\nZ+rdXvlqr3FlveVhqGJRax/CKV2/p1CkBZZq/IMxxQsly2m823l+4ANXQ1e/\n6x2Z1ZyU0PrXGnxRHmqbnAWm2Tu+xiY2cVN3jSSePpNkR5et2RnAyQdYRsAd\nLK4XCU75de1eonQF+aKI0EHtMJO2b/bMbLggVQXui9lMA5y+Dkr2D9GeQFy7\n4OiKzhMGkCT6L+cXqiZoHCaBDD1zYDE92dATnYgPKuB+XQwNmsVRi1mpbHAu\nrDM7KN0luM+kYnIAo6R9G0k7PSd6UCBVpr/dMz24NdALBWxcnEMbcXbyrOkK\nTwOJR8NXAn0vZVvepY/naDVt5v/UJYmrr3PBGpDJpMKcBpzvwNlXj0MK2EYT\nnWyMvdzolYjKmWx1ZMp/mhEmb8mMKMz0tcm63a8cEjVD3DCnoqOTgHC/TL4I\nOc844h/j/WIT/mx/y94HiYhG73slZSd/g+plk7oKJQaErWHOM95/UXHo50MD\n06bLb7WY8UqTc4FgMdabfWxb8DI6wt1WPigzR8FGud4aXIBZvQskoCjJgbyy\nRcZN7/pOWiiF9UxnlQdPKtsDEsbutCY4H5Yh7Icj+dCUuYPYU2WVBKIzr6zg\nVCJ04b+f2VJ+1fCdIzTFG7bkpJ4+zc5soRCM583m1AplXTwJKssr1eF6SGec\n9hts\r\n=8Igx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC32QqbOfq5Dzdq58lP1nJBsYsI4P226VVyHEwKd21PhwIhAPOhovBjHxHwhciRtzhT8VyrE1LWvpcVk1f+6tgXTVPL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.cd9110cd.0_1631814322442_0.9274915187077566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.1e5a9883.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MzibskN9+Bh/EBtvwNsWPw5fuApYMBzoPpnZ4btj1sQg8+N+Adkzo3r9tpQIoJB1mVI8pAvOCwq5LwrX2SCxiw==","shasum":"9c179ca8fcf374b0f9ad18e1b10eb42332e4a759","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.1e5a9883.0.tgz","fileCount":19,"unpackedSize":75994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG1AUGeUzkRGInUYgh13/1Cmjr0d7cwkT6hxSJLdzNMQIgVGAzwsR84xrwC6uYsK6t7+S4D5QpE/zCo/+1lWWH4ZU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.1e5a9883.0_1631911137592_0.29595872593755845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.32c830ee.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-zZ2ueNJ2gLxazTuk5Elgd+L6i9HYz3FfzzyUwDjfrq6TIOk9iTpk3xHyx5ijhTh5337PXf7dZg4FB6qtE5nbow==","shasum":"11563a77cd4278d2dd2b51ad41699d48754fb204","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.32c830ee.0.tgz","fileCount":19,"unpackedSize":75994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd1l+uF/qQS0Wrnyu34odBpZzQVK6EQdPsQYtM5d/wXQIhAJJEIOXdKEDJg1f38+CXP7r4nzDMy3ASZ5I024U5d9S4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.32c830ee.0_1631920115164_0.17628037614699066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.1de87bb7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-cV1iuOzOkduNKQV6fknGl3Bb702O10XCq1mNfi9NJ2FSUhsSJy/ITWlUqQsxjhM8hsU2/jrLy76HlZPsAx5wTw==","shasum":"24bb661d6572f4ed02f77d0da9d78b541a9a6b45","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.1de87bb7.0.tgz","fileCount":19,"unpackedSize":75994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3Tzqzjf0FOt7fz3twHO+QZhdApH5+ZHqW32sRgBpY6AiB3FftPgvfon6FFO9KOsUi4HUvNX1Q2j0L8PcwcLVVdJw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.1de87bb7.0_1631991119648_0.5285481976872883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-auSIFLP5Pyl++f4mZgx2p3hkWgTpdAE3kCp3VBxElE6qkIooj1l0BbEv1Gu6Jri1qjtwgYqWoU/8nnMrK3QUrQ==","shasum":"1af7d2b559d8d1c1e3a3dc93aa2facbfe67ec6cb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.f2ea80c4.0.tgz","fileCount":19,"unpackedSize":75994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChKv8c/hbTzsqT7r7B2pIbtK6iBebQL6wDFindptwDugIgHMI82G6U4TMLmC/vY2Uteid+02JwEMSzrp5zkZ+ShBY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.f2ea80c4.0_1632160484361_0.9177853529865692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.569d739f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-r21asr0NaohPNAM8+cGenv0cDuP/dY80w2MmkI80MnmB+JsBscUChvmldKz3JtGidoW7ib+f2xOa4VfPLO/POw==","shasum":"e3376f4c6406066588aafc90f97ca3cf226da42a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.569d739f.0.tgz","fileCount":19,"unpackedSize":75994,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTpg1GQVj4mcq77GGT4hww8K/ipVQ/yvVzafzxSqQs9AiEA0l6ieE/TnlQra+qeRs4SzOf0Kun0YV0Ig8VWHu4bzJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.569d739f.0_1632173012608_0.9023707894721931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-ripple","version":"0.24.0-canary.5a434a50.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hDtd6CcB1R0bp4XXTfsZw+34iQnvnLM24b46YjEf4zLzo/s+3X8++mbrBC0dytwknWnSFl7jvu0LbgMj1IjEaQ==","shasum":"ee2c335359550c9ae3be16f1ab5bf7bc2e52e533","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.24.0-canary.5a434a50.0.tgz","fileCount":19,"unpackedSize":75986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDE6PPouUAs3qS9moCoCYqDp8MtQWeoLCPUuOvBIBAAAIgR7hZOcjpbWObHfZ+cwilrJPkvGXQh3gmGNZCm+XZMuI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.24.0-canary.5a434a50.0_1632189628691_0.030108092581138335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-ripple","version":"0.25.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-R2f3WM1Y27krX0dGqRi+uiIxfJbpj6nitHGP9lv35q95Gw4RZbjZLrmY7bvDQFgVPYMkN9nwvhFF6Asuw/kXJw==","shasum":"e1b0ed514903019bce279ea45a4dc70b2a78ad14","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.25.0.tgz","fileCount":22,"unpackedSize":98672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgfZMbGXM6Qfe6suFP9e9UNsKjYa5Moo2jVBf9bjer5AIgMpFJhcz9BcV4TBbpdtq+cFtEEC85Yc7xTZKZU2uOglE="}]},"_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-ripple_0.25.0_1632192779850_0.41361765587585375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6be1a13e.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.6be1a13e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.6be1a13e.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.6be1a13e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-D+ZzNHeQuxYvjatfaANhnkHtg5ffLepZ0kF6TseWqsCV0CAMHMlBIWPtJ4vVmKg1qHvQSwr1MRoQlCQ8dGJiFg==","shasum":"b6b38da464074b36ae1d8d6db54a99b16a4c1764","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.6be1a13e.0.tgz","fileCount":19,"unpackedSize":75986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaTMOUtxek3fCem/+8qLsfp6Io8/jyuXd7HAmIh95u0QIgLmuKuqIc6Pez0bzttFU+DMbZgDC8imvVL/gEDpbsCjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.6be1a13e.0_1632192784072_0.7222729862194732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vTJaw3esf8QBnLwNHKOs1OVoKJwIcHEQN6pRlY4R4s0XkKeDiVHVT0gbDUyJzKJyNWdjOO4PO0mZJxx0o6y1oQ==","shasum":"f25964cddc6c37180256edc6bf109aabd1b468f1","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.b1c1ab52.0.tgz","fileCount":19,"unpackedSize":75986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwwGK5GQIwY3SznkJG01HYwFmYu34pn/4TNRPOu1Ji9AiBeodOvQNllmZzrXJNE4YmbZD3wt5f0yTjrXoJFiNXfPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.b1c1ab52.0_1632193921018_0.6809800098453982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-ripple","version":"0.25.1","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-e7TsseFzbo6TIMEJZNDB0XVbr7ks3PJyF5kVLAZjvItKLlqFoYMvrMAkc8bUGNbRpgIKUWDoabogoduk+iubfw==","shasum":"40813243c39fba69529b9e5cf1b0b65d692187ac","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.25.1.tgz","fileCount":22,"unpackedSize":98672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDffNVXayOnNtv5UkJjCwv8a+ZAQ3MOIqxrhpcvS/n11gIgbEZG4rB0JZXzCWhJ/r9N2W5vonl0Ct/wk0JD21EKtJk="}]},"_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-ripple_0.25.1_1632193958562_0.009093228816758003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.ae060177.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-l7D+lALF+pULX3aLY/52eGiPHsgfr3SxwegzhE0znz3w5n/HgYPu7+8idqMG4qXFPYEUo77y6svR3f9EwnDYXQ==","shasum":"14c594526568d6e7c62ac678e3884d592989ed9f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.ae060177.0.tgz","fileCount":19,"unpackedSize":75986,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDFpv2BCOa08DOrTDxcE1mpOGgkM05r/1MTFKrBoItIAiA2+jm1pe2k1PV6G5AwPYI+1cexQguT4yBVLNAhKWnOrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.ae060177.0_1632235076713_0.05951926531870666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-SVdk479tpbvy8l250TSfgsBJLb1FaRkMWOEbgAOqJ7MHqJQwY70ijfMqcFLQEqc66cDo8PQMJnBTej/yl3l+YQ==","shasum":"3c48b77713fb75de9bcd533783b5a6d3d78b8baf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.b6fe2a12.0.tgz","fileCount":19,"unpackedSize":76057,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHvPzBbLjszN7vOhRy3/h7YB61cMYMHE3CByoldybJGwIgWZ22R6cK5dGMQW2nAMX1GjYrtSZeYstxhhbqK4Q8pJc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.b6fe2a12.0_1632341766654_0.7951569558964902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.07e91417.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-8v36lfB/jmGOX1EdJKrI9Q2iinalWO3fgcCd8px7YkIFted2FjgU5esy8tzC/pn7Zz9rYfna1RdqwF+X0DGW+w==","shasum":"b05600aa172577dcaed7307098cb3ade5470eab6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.07e91417.0.tgz","fileCount":19,"unpackedSize":76057,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiIcWcwWBkt1S0AS0UzAv0Ko0TLuD34HOecq0uVnaQ0AIgFcAMLWDT8I79E74ZK8eh8JKaeMaVV4jFO9EjszRCT+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-ripple_0.26.0-canary.07e91417.0_1632344735340_0.7544830738663744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.e2203ffa.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Q5ov5kJLmYHj/cNFyg2TwHttAqYqYd3BJDxSIpaQ9aRI7sH3qq16FWrfhOFtgCWjCSgJ3d/ce6+cG9rUSbrP4g==","shasum":"c0681d316d9209d0372378d759d8dd1e3c9969e8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.e2203ffa.0.tgz","fileCount":19,"unpackedSize":76057,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhYbQWYKjY6EmsqOIGlC8lWh2jdWszFr7xX7ploQk/FQIgIckLkArpU7tJWpIifWvstjZmvCVSJzMumx8FYPWcVXU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.e2203ffa.0_1632421645974_0.525778765979759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.4abe237e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Wo68T03+iDlUxTDXQ1ybfBRgp8AaJi4tFpa6Wtj9fZ7sUSxdZW4ZPf1/BPjpLsYwWrlwVRyU+eNrI99C4ownGg==","shasum":"cf91f6454d54510459b22a8d7a1b98eeb85cad52","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.4abe237e.0.tgz","fileCount":19,"unpackedSize":76057,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICx0nmhdVlUMOD1D71F6HiLKAWWMvMP5ZXj/tIbEFrW7AiEAnwtngt6fkY4HTPHOR6e/9ML7w+HHXUbCrjRDSuNCKhQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.4abe237e.0_1632504657411_0.4923726197340903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.6278ee5d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-kvXluBipiVwsCREihWRImm4U3fsuAOqRkJPgMv1Lx/5/R0q1YipIGTksxpnfUvm2UDwaQVNX0o+Rw/YOBL7HMg==","shasum":"6b4dd64978b064edc432cedff11d06550cd43884","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.6278ee5d.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU7BpQ1zhVuz+uV5aX5RU2TSggSEB05FU1Dw7lAXDggwIgVfptQYO9GrMILnXnnScvPL9pU00chdlajvOS8dGT7nI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.6278ee5d.0_1632767471872_0.18610167426844781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LiLchT+1z/waqAicvq69K1A3THhSXqOfQfJjW2RrLBbciUE6Th4LTNb9XBE9W3URMb3TvlSE3DpqoIFN2X7QKw==","shasum":"03c3bf17ac186753ee62db17041b71049ce04a19","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.3a5d5f34.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZrikJBtuoWfw2fcIekkHckfXs48z8NfoAslgrHfSw7wIgUDOZNzb3imVTAYsuH3/gBZSpYtvnC7/gYst0CnAGTac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.3a5d5f34.0_1632782481508_0.197211042047289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.143ed3c8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-gFfkpt0DBdQoB6Z5NLhZDZxgtubQ8daw10lfFVWs94JOoMZO6qtP4ZjtvitMZsHBgLPkYUJ5Bb69hyPwcGMEoQ==","shasum":"923334be5042c9b0160466b7822bcf5283165249","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.143ed3c8.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYOzotonjqAbxVOh1k14CUqKoxkr3QYE1TSWUVeSgnWwIgbnTTX0Ekle78B/9YPik/b3rT4G9yivsvnupM4tPvk3M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.143ed3c8.0_1632880240660_0.129921448553441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.e5923d68.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-5XRYSxaNu0X0f7UBFMpXcjbAdrN8k7UALC4RM7sBh4FNt9PGxwl8hrweAxOWc41WobgWlzxZLep+P0wz06hXbw==","shasum":"ff9b5dabea74803aa9429384ee5c397c9da72df4","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.e5923d68.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2tDS6jr7loigT6lZ9V04xqqupxuIX9Vn6dopF7JqQPAiEA54SE23TgDXQ+NW4MMslwFDZZi2wsG5FIsRa3kqTLqoE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.e5923d68.0_1632960338264_0.574555750427723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.d8ed5109.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/ripple":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Ar6CieLi+Luc2+wv+0hXV5iONxTHZOvz6k2myBL//YmLveFL5TwCx7yTaV5bmUorCJ4yGnkH/jIry4Af9WofIg==","shasum":"050178168ee3f9bafb4aa5931dd873cb47ff7f18","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.d8ed5109.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/z73HkUDWThL+bcuO1zBAOz5ktgGdUPWc+LZyXYwQ1AIgY1YrvVWvQa0fZQEjUnA1iIuxyllLDK/WZAYbqCffb5s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.d8ed5109.0_1633044822845_0.83737706593403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/ripple":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-iQMGk76lzubJqgN7vEPrH7ADOg1+a+cAyxtr/R25VOgbac/NxEQxGZMHdDEScOd/ibWwG3fdgMDSZ7TBRTc2vg==","shasum":"949f79e2697aa32b7ca29ab168b76e89b78de9f3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0efb9c2c.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvJie/U47DmYZB3R8+FfzFQRlA/IoX5W8WHKqgaNckrwIgYDKZme+ySl5fu00tZotLLgnYC81RnLdK/4qAyZK6x50="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.0efb9c2c.0_1633140486175_0.9747303228640614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/ripple":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ezderekb+gpAlmGpdqGY8I4LaQBHgBRor7OoKKAbLjHqL4t9hQ+FvBj4WrK3wccYao/D1aM9fBcFX3nHlY9FhQ==","shasum":"6682e254fcd023c0350de2dfeb98639464dfc983","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.1c9adcb3.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjDtSwiRgxOjycxvg7/CnOG/gMI0T9lmkWo1Hjb631aAiEAqkNFBAHJh2kOP56LS2D40X2oFEGJWh6ZECDo0YIWPL4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.1c9adcb3.0_1633368803593_0.8754018913239965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.dfc00d60.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-J9nBWm3pFni3pdBQOIAtX7NIOhYbscVE15hHR271jQjKhcIeDJ2wYyj0/gA/E27KjZZEr4JZBDOs98LHDKpovA==","shasum":"a7ea9af12f4a9d210aa108abb0e47c67292c86d9","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.dfc00d60.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEa1Stw1etjAelgwVXXoiuFXLihPdNFDYEawbOVb/nMjAiEA8SOa0WsQPbMssZbZCofbbnrDw8abB25Xk0t0XkM0LEI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.dfc00d60.0_1633741025241_0.3162305064734239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.c3aa844c.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-euyUHMyRKe2AZpBwU/wSI/IT2vYNfwVtYEGNUxsIx2JXzZjLFHFdXHp5Gp37G08jPnfOlhVj0fQbxyriYM8fEw==","shasum":"fe75c27c391181afed0d078902a9cc76baabbf7a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.c3aa844c.0.tgz","fileCount":19,"unpackedSize":76088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdQOQo/AlFmpQPPUhQT67cPAww8NxcEGaibIAKyyrgJgIgQiC09MqwuL8Ekw3eEnz286W/w/lfDH1ABTEzHcKRZ5s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.c3aa844c.0_1633994051530_0.697173430818631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-ripple","version":"0.25.2","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/ripple":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-z39JamHlKVEG0nRfyJeFUACbGjP6AqP0uUamE7qFtuJFQTlCU/jvdBoFdNo5V3xtKIN3/iH8ca3BXVxRC8u63A==","shasum":"c697c94c53dd016dcd2ae6cbc2609c58b003d161","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.25.2.tgz","fileCount":19,"unpackedSize":76053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvy86mevskFSeq3bBteRMymgB99IdpxTUyvWwo+DiIrwIgIBZiwf6sJ+00rWsnQMjrMTq5uTU/zHVH1Y6JY+RBeOU="}]},"_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-ripple_0.25.2_1633994309095_0.8465658247392214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.406d6fe1.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ivsRJDFTmcNb2LANss7bQrcYt0xCd2fiPcrV9MGpZZ66lyTRcV1WSalL00gDcaDOU3X5/UgR7xq4M9SipYAEPA==","shasum":"c117c0bd44572c77bcd17322932177a84b47b5e7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.406d6fe1.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzkFFMUsVT2hjO8hcrBVKpbybyLQrCf88D3DE7xhD6lwIgLvpfbmLETJhWm4IIrXqrzUYQaxX9dZlhxENeus/RTis="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.406d6fe1.0_1634158757738_0.17643527433555795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.ca0a674f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-6xu94urhSSznglkqXQvjeXFhrQhvWNJ1pAv9WSX+poTn80hZm3XyeZEWDyWUDaPb4d4twZOODwgDbkGo3EA1Zw==","shasum":"83951685282ba9889a7cdc36185eba169a0b01b8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.ca0a674f.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAT0tEKsFSdG0YHfDktbwd4GJFjKb5QUXMHzCzfZGDFEAiBBy0gk3C6eMgm98iPTL1URYStxtPHhfAiiA3IrMqSr5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.ca0a674f.0_1634593001293_0.0031299363357062404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.eefcf660.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/ripple":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-LtbPiYScIbXBY72l1FU6R2fbDpjqZDP6E+GlAe2a85UM3QayyGyDtyA/O/A/RiuuHy1bvOKZBKv21FmoMEw1rg==","shasum":"a23111429f28723ba2488abb42efd0b87a4999e2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.eefcf660.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID58bU0GUS2yP7/y7KBbb0IOXbp6FBw1cpXWj9UwCnciAiEAgNsM2JCWA85SPF9WL9YcWhotDD9aZZ8mTnJl8aIGvDE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.eefcf660.0_1634765007247_0.1794250194390561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.d21acc8f.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/ripple":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Yoabzhe+T50UHRNDYkEX0afwQqQNeM9QxqpOysVijGum5dvwQT/nq8sH8DyTjMXGycWnn8eRPP7/PVoxkMFSpw==","shasum":"7a25038f1347eb3e5022dd5ac671b3432b96eca6","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.d21acc8f.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTi0B/rsCJEYia7p2IWTqC4Z9qGlITGDc8Cv1y4msIswIgPKhuLIJHtfmIcD9Rv12oKZmMbMlCoUxY+nQ9MDvVLCI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.d21acc8f.0_1634769139702_0.8348483418836796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-ripple","version":"0.25.3","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/ripple":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-G/gt/csxgME6/sAku3GiuB0O2LLvoPWsRTLq/9iABpaGLJjqaKHvNg/IVzNDdF3YZT7EORgR9cBWWl7umA4i4Q==","shasum":"3b8f08b9d4195ff42989d08a22cc07a432fd753d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.25.3.tgz","fileCount":19,"unpackedSize":76029,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRSJ6ry+/m+rqWN16s43kqlBumLYLDvFyawOBgSTeR7AIgYa9fFzFjjJfYOKo4OeNLfufChgQW1KjsVKNkN9kXFNU="}]},"_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-ripple_0.25.3_1634838939109_0.1868771323329197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.60449b7b.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-fDSHLIeC1br/5UvPAVjOTVA2DB6aoaOUtirz6IObd51S4rQAzCJsOLjAECAk6gjm87t2KR7IEdSiPSUuPrfl+Q==","shasum":"64a12cd4124a3bf2ae52aac23b255bacfc3c25b3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.60449b7b.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8lPXzntGDY0GiO4SgzKAuAkBLkv16sLAY+zHleOy+OgIhAJjg4kQMgyzaEWcwCCHfDJzct0saBNNHpDl2Ju13grAH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.60449b7b.0_1634840233287_0.3765394967119051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0d8084ed.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-k5oTA7rnTNjfu9pS9BL/FmHDYzbQhzSc0zPfb6phEgSg/qdOu0he37sffB2grR/dZwxXKnPIGPd7hieG3cgKgg==","shasum":"7368098a37c98c5ab3813bbecd448bd1a52ff3dc","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0d8084ed.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+eb6VjfBlJHrsx1FyjFYcH1f0+Ey0i+/Fd0Uat0jH5wIhAKATjF5l+SOfJfUd5AOUNJigKwddb+vldqmjTaDmYiaN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.0d8084ed.0_1635443084338_0.8606666276642767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.232327ee.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZfOe84qXkUU4aG8xZN6vILL4b0Ud3Y+iARrWnUmUGWrOy5hZ/INNX8aBmeN4sxAlj1Q6GD7TQNM6hS82DJtpyg==","shasum":"b7b127de0166d5954c84d42068360b1dc31e0a6e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.232327ee.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICehGXEiWkFL0qKw3gV1sD4aL4LEc9mMljadT8im81t9AiEAu7VRb5pOJ5XIK0PMFTXlTKFbYgOblx6mFriNR2iEsDU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.232327ee.0_1635797735286_0.08936251865289058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0a492ae8.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-va+0jVgsBCgaATR9jUpt0wP713i43syTNgI1paCWoLcoMQjzQiLhldU/nA8gHvc+6424kzM19HytKpeGBsl8BA==","shasum":"632201f366eb204aca62a794f541576095e628d8","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0a492ae8.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjschxpDGUnKytdy+7byvmVztpLGIAmhNBnKeD1gCkaQIgKMl/iXPzzWEeLDtR3PcptxGXDgtNkdqmiqxi8t8q0es="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.0a492ae8.0_1635847215164_0.518168536224443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0aa18745.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-84J7vjypKqv97rq0AZzahcRxoH45kJ3mQT+JoUEFHN89Ldo1e8fYiaGPjSR07JNGX3dv0jLpfVFOOmwY58bmow==","shasum":"68b37a5b8dee306021e729b02c3d68e60b02da3d","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0aa18745.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWbLASoLIkLw6KOplnRI4YsiSGdhQycJGPAx2XHr1twAiEAm18ztCxEelsOzC4qv8LJs9sjcdcg3s68hwV36kZw/lI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.0aa18745.0_1635876460976_0.2818189086211065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.f3e28323.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XYPKT9AXxw1w8fb2AnB8ptCYzo45KsAtCbeYreoC8axg4MU7idjdQfcptqb5ZqQ4eHBIoN3486Quumcgk/quMw==","shasum":"b7bf38810faaa9d0b7cfeb2e8e947f6ba2a8f6dd","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.f3e28323.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVIprAc7kE/YPG2XFpsBar0dB6CdGM4ctCt3QLGCL4JwIgCD91nnIsxVpJY8RYIlWn+7SROlnZrn6z4dTUxGmrWvI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.f3e28323.0_1635879562313_0.1629539187880451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.27e05c5d.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-E5fQV6VlwSgx2+nuUBQtHupYjzFBocwATAP9ADoTb6DrF0AxVqf0KsyTHNhP70A5k0NkbqV2zaB4pdNo6NglnQ==","shasum":"91480209c4ab74d63ebf46670a03c58eac5a4059","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.27e05c5d.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHzjmYZHlVpmohPYJTtEijMZ6T56WKu4kht+UcY6HsDAiEAorGhxUbC7wkGmYIfT8DaAkP0+ChRr7QBwHlpPAphb0M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.27e05c5d.0_1635965088888_0.39141555992600097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.b9e44af7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-IVT6wbVXVTe6IGjrJxi9J31LACR5McuHtYN6DhciLzrMLQrBa33Sd+1fY/vKGkIZqZkA0r0AZS7UA/CkudmeWA==","shasum":"b79e4db5f3de2825d80f44ab0baf7c54fe67058f","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.b9e44af7.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLfcXnVVSobzHt/1j2xNT7ItUiSVVKTvnr2jgT/ttHsAiEAsoGjFjl2yVSLfUh+xf+v55OcdrpDfqEhuaCb9tXOlms="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.b9e44af7.0_1635966232102_0.05112239527042117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.448f6cb9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-H0UepYHm10DtSfT127W4DET4H1Cw8Jyvd35+DYd20vBJaMb4jrhAY+aStVu6C9cyz2iWDf1ZUYpnY7dMeMRiiw==","shasum":"d50c11eb1be01490a8153715a660a14f6b92d0cf","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.448f6cb9.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErmNrL9S69FJ0Q9BvKjv7YerPMaa/H0LGq01nMK5rmnAiAz9493WFSN1EFDhjFdyI0w7XyD0oEp2aW51B+g7ZwJ4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.448f6cb9.0_1636049265000_0.48349905300989304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.8067ce28.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/ripple":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-wbK3wHjCAzcIF2G3T5v8ZnHXroSVviFDfXJCd8w8iAQT68+sd1HvBstoAOe41RbovxEznaNl8UmISqt0YDz8ww==","shasum":"32d7232a9962794c9cea298f423af5ef6b304433","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.8067ce28.0.tgz","fileCount":19,"unpackedSize":76064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+x+LJJadgHwPPWgod43V4fTjLedlIGmgUSkMkVQ/BhAiBxnFpfcnFcAmZOq8GbW9yhPVyjVvHwOQHScfTJziAiUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-ripple_0.26.0-canary.8067ce28.0_1636064536906_0.16656117757568212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.345c2bb9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/ripple":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-wCjRoisVPsBp+ylSBCkvwlzUq+Ir5DiiKT5GnOAoM4l6mznDXaNIcP9B4mLcCsj0BMfh0doeZxq++HBc6epchw==","shasum":"3c698743f4eda739ecbd640051426223ad09b23e","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.345c2bb9.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3eCRA9TVsSAnZWagAA9pcP/1+twdFYXbn06+E/KsIm\nA27T0nJ2vNPIA+2nr/DZ2vq/1CApK+b5JRjXUOPcfA5ZqDpqhxo8Q4iuJsRq\n7/cJMcwrv2kUPjR38NNqgCTtWr0ckb3IuJPtDdKbw9GjmOnPeno8yv90B99Y\n7f8HCJro3GgmhYdtCs+Mr3yGv+xcC0L8VBYBpMWKZ70sjl7yYcSdR0rKRB/A\ncxwTXRwmX4Y90rblN+pDKclmO7jeyJmOFHNPNByKEnjdRWDTUSkm0QsZn3Xr\nAdfP4HvUZ4VwkytEuMoshPnxAd7GZ4rppSioiX9rPAWTHEqZdEFPDJGXBxJQ\n/Bpowk0N/gyaMSuzyRI8LsdW88pQglCDpwePEZDwFb5RPFgEtqdFEaaaXKn/\nNO/KgnthKb9YFEvKbXuE8+wnwkWMOMDSbXbLUWKau/TF47cur26FDT7mr5ns\nmYNsIiUfrtqZMlHHpUBhykaG8g89aMQF7M2uathx+g2jgWUrRQR6CKs0AVEq\nDJirYUvmqdMOGNuM/FmDmvvWzf5WsbfYgH6F+/ynsgKo0Zb+78Q10fyLabvX\nYjeQ6lV0eDbwJSLlZVUnGraBxM67jAne8fPP/yDTos8J/OBdZdDpbRs0HxwB\nBEXosJ1rMRpdVK0wx8oPbpzAjixTO0CzesbEVIg4EAH06bZPyBDAe/yW9HYs\nEAi0\r\n=RLCy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyJpesTgfmjAybUm5lVKVCRwiOT/or49kxVWX/hzCNBAiBJzzjT9iW/lYXbCGlFoOtXQ2tgORwfAwaeZj8p/61WCw=="}]},"_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-ripple_0.26.0-canary.345c2bb9.0_1638464990689_0.8437305167315927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0547aeeb.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/ripple":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-wEsfoDs6xnd4laywMR7LkC37JHIV82mWIsQZUJm+LM4YZzrtfaaDcVK1MBZL/IKpCqycS/0dXch63WWTdO5ETg==","shasum":"e1a5646b9ad9073149c32696cb16792ccfb000ed","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0547aeeb.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjviCRA9TVsSAnZWagAAulgQAJoO2+3fMqxRrBBhS6N7\nNJFiqz49O5Pb87JLMKXFxQY+teUAuXFWVxX+w7T86U8r9jjIJ8VTOnbBa/Wb\nmIZGEAexc9cHuPTz4TdSjQ18G5RmD0xyGCLkGEl7J5fA63YMi0FgmXvbrv8+\nZLN4tvtE9JU+InDAmLfpZYTzc2xvVZf3UW67rrBTt1ORvQeZfWSfpXpDejXp\nAxHx9cWj18cAa/XjbGK+7050LNpdeafbydxANx/7dPAJqIhMJFpYED2wtt/T\nsYeR+bowHvtin68Qcvp1/Sh4Xet5CeAZXUiL5waaLNd7MP2kpYnshjXrn4hK\n0H805WMj7S2XDQTUmFUBa1uSVoE5kbminqlkmfZbJivRf9cMF8oL06DsxnsO\nmuGwtLvJhOXDGc6bYcEQ2gVtoftbIZVfeJHr63F8YqKufCK5o7elGkWajRMe\n5twdznikE2uwQrwumUTQklKgREsgFrh0b4vYqL9hJLIsbFRyRDnVGPkpgs36\nVQFz44cre/tM+ah90sztQTqStZfhMd/ofyEZwUS3wK2oaGXPN4C8nCHS5Sho\nNO7uIKcc4NNyA1x1DtMufmcyG2/xBxrAVt1XnE2kLzKwosNOwLb9eBzEiZxC\naZdKNFWdHLbqwtEXkHpmBS/FWVNKWkKzsaWhbold9Wc5vrquaB7EwttQXyTB\ne4Pm\r\n=3AcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOwcgZ2cYl/i1UDFy8ope989fYv3tQUaEAvj+xZr5P6AiEAu2sfZ9t/lbS1Ga0YPEs8pByr6KaXXVFLfDl1a29SszU="}]},"_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-ripple_0.26.0-canary.0547aeeb.0_1638808545923_0.5274934265402484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.3b2452cc.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/ripple":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hPVG2ugRekcc0PQp46aax0THvlzwTPs8/D0hNXY+KCSMPQuJFN7jbP2SR+aWQ0+WR0NCHBAB3EPqL78evrSpEw==","shasum":"f6da1eb1273f868549fa5a36d53ef9ff85788bbb","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.3b2452cc.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhECRA9TVsSAnZWagAAESQP/RF5z2Nqa8tlWp8txQ1A\nbh1YEqD6RrQg/4xYv8cNFWGZhiuRVokrSoS0VAPf0Pb3uUhdeLjwP9BTxFOc\nbZuw00PC4B27Emrkq64vRebkUPL/OeeV+VghiCY4f49a/N6p6liQt/ihuuDb\nPIIuPfA62EsR0btHMz3NOCu0QfqNJRg7dOJxOae4/+Y4BPEyRTQBjNFo8dmf\n6GUgxd2a67SvcRuvAAKTF/mPnY77SPpk51TzGW1colWjDUQODfHQsdzMYrx6\nCkDcslkWPyZTeARc8O9TjuUBIdQ55g1KIDLtF14ouExgA+/FjNrlIMjK06f7\nL97frxw0kVSrDPkvUVTccr6lBFqr+fLmXFiL8EIhYrWipxe/Fr5SWM27HeL9\nVt0c+Zfyuy5vY6C91qCUvwImPPtsBlzzKM19jm46cNXAv0wIXvWGccukVjC/\nMBNEh+ObnUnOFSPxNx3qqDvZQAsvaXE+/lK9AdWAnq7sejVQoH4+GKQNyhs/\ngJo7LaqBRdiLPkjkTBOqGqbo1CGTMu6OW8+HZwz/ZdrIpzPhVG925+EPl6IP\nduiVDBsOK+3hId2w1FMTLCc1AD51Y6JUn9VlsdKv57AEWdpJ4rEnSPe+ZTBP\nqCCq1YKzSL1Y3TLK5xWoQpgs6CnVB/AVqugA3twW5MAdJAjSzCXrW/SaKrWb\ncNeY\r\n=EiQh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEtI/y9vwnD8qEHqGtYeacniNU9oB1DWADQcL+lLQzzAiEA2AYIBwR/UqZwpusEsRUG/W6hp1R4Y1s2zupZoJzLlg8="}]},"_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-ripple_0.26.0-canary.3b2452cc.0_1639008324157_0.3793370156395932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/ripple":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Q/Q9qA3ESYvBEbY1UTFP75bqwDW+TBNflQ0mN9VBXT0fe9f672+nzCnw6AHLWqAsk3gBFNbv2IXuzNK82xfpeg==","shasum":"d634d576de91ffdc0f25c53d363c4d91eb6cdb4a","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VACRA9TVsSAnZWagAAUgsP/jx08ltrTWVpzP51Cd3o\ncEgfi6CVyX8g1Q7vXU3XC+rKSKfMlSmRdatkYASRnYpx3b8zoVsVzVPe+brB\nXjpxeizwgkpsqe9t7yEQNwnnza2xe13noaNPDchHwXR3OgZKxTbD9H2WCdc2\nsyLrGJlzZFaBoAnR7YrPudwMYLzWK5Arjp3MSfl2hTs/DXZyoeFLdOnF2+BI\np2p6bQsTCSe3AQqwxXoeNz2JHTsMiExyxVAoLOkRTcr8ktm8sPhfiVHUi0WK\nnvP70vQbWmzkKydQXi9isFaBC6WhAFJhb1s+t5cl5n+/z04jCmgqcoEDaRZq\niHnhrPzjyCHS/eEv9VeapGVqRZwJRutG/rPBlsE0x1ofpL7ho4EPov6no7Zo\ngnFOOuehW5cmruQjNMLK7CrI1+55Os9ggB2TDGP7djbTBGaAtKAVM5rliAm+\nUP7ZWYBnx2p4MWrnWx9flZYO5MpPmzANLJ/xjEcBGDrrWJnM+nEXpGAhkXpu\nlb5DzvDKkWoy4lnwGzQI+bg+q/0xiephT0wkvuOR+ZxGc5ge+dp2SGrmXbwk\nwt/OGATQmFwMIsyjYCB/s7jLpOS0zqOCVSF2BCSG5dsLclAp7RlWb0S0/fN9\n7UWR0OzSOQrsuRysaaSGBMa18m6B+vMyB8Km0vbOM34P57dc9mqesBj1bMfX\nAxOu\r\n=GRI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG32PVtJUWFdcB/6dvbeBJliVWEjDSFYc/5EGKRAIoBvAiEAmDp0rTFPWmVSf2cOLzB/6I6oAL0icpJyDalldnJdWsA="}]},"_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-ripple_0.26.0-canary.cf7ba5a9.0_1639163200070_0.8794580793911673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/ripple":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-EjeGe8oS/MDFNNL5bp4bqIcRtt8TJV1Zh6CCV0XRZgOAgFx//TAzp1QbLHtivdB781tZUAOu4B5CBpNHy80hEg==","shasum":"ad878ead8ee850916bcb7970063290f7e83b0a15","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.e1bcf14e.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dhCRA9TVsSAnZWagAAMyMQAIEVw24P+E52zZFEHQCM\n6YPUZV1MTvgwEQ53nkSyrD58M1LMjVXtrFkJWs//OTdXnlcOBeDxyof/mM22\nIwZD5I3DV8i5HuLt8Ls5lSh44Wa475bR2TRp0x/5Se3rJigK8+SZtPVhYjf3\n2vWKCIJP6CVZHOmI+8PjgUBf9OenoLrxEj4KgKjPUtSGEsB7wtNPMrbfP7D2\nZ8lR1yYNFrksAh1f/hRXYWvFYZCeUm11t//MfyOPJfXZ3aV72xZzAQB1sOap\n3LMiUAnY7aHnU1ia/I/ReuAHh42UQw5nzI3I5TGVYAp3kR+yMP3YCKbyasku\nSer3MdjBknNYDYS9faEN7MYZlHdq7eRRlpH+q6fFURd051+li7SKPULl/u78\nhuuy56idMi9WR98Jnaj4/w+emZLir9rOjLxEDXoL/WacE4+3zsE9Ez7SA+27\ntXMOCC/lmN5bMzmtZJU+4H4drnapTrAbq1CoA0lkswAPBIjHK4uBdkydUkJz\nLEhFJbLeGaka4RU2jlShBTiKE0PawGD0LVogRr11xu9K13EHiQiMcJ4Qo+qQ\nwZDidF1R4b3kwxUo5ll5yaQyOG8NFw24NFKQz7FdIrJhzhaqzMUo9mmJ9WPN\nP2N+CJHlVLFuxlbdgd1vp9Mn0YDXPMjXdqKi2lMwxNzDowhSzUwetN8FOhh7\n/CqA\r\n=dLDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJpJQqHMLKbGficVxDzBNtA7tiD5QznSHnv0KRpoPWSAiEA59QANjiBaXM3km3ZkOF9DnqWY4xAXIl9zb1PJKkDJHY="}]},"_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-ripple_0.26.0-canary.e1bcf14e.0_1640724321469_0.832990649220058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.b9d35b69.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/ripple":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-mRlaKoHp1kv6Gmq3260OQf9htLu/CL3MlCsFmL28KrxPIu54HeQY44Yd8xv81ziGyYp0ouVHWdz1NXeDTiGSSQ==","shasum":"ae930a22b054558a58a1dacaef7dcc069698dcd3","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.b9d35b69.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLcCRA9TVsSAnZWagAAC0kP/2J1Bx5/zhwDioxnnmJL\niDhEpOy02gFkVRcaTHwEVP86DQMJ5wpxrO7Dspk3ldco0ISCgVJ56ah+zDSk\nTO5WwqbFnAWhXELtCjlSP51+AihHOsfGf52vIDlks7d25/RVzbB9wDM/oIlA\nmTP3IPXNxMfFXlzXYVttPQ303ln5zdY/N6PjThtWacFyqzjXO5MPQebolNC2\n2dpIuqEF3kusO+P4ZS9GwEbZkrJSMSSOi+ZNZ9q+bUPBF5R69XVM2Fw5F24f\nz0jklgyJszi4QYYqrf1gVJL20eN/XQViRYRwHwclyf8bQMHQZj4Z4VF2Nv3C\n8Afd8RIRK7wNe0eEI4s4nFvfEfDjKPtpFQCJth7+fomU9wiuC/pJPV1/CA8h\nAveLaiT40hL4OtBlp+ROgpllUvlIuzzPO6CCPO6fw3dnjBeFK6nfPv0WzT+O\nm9VOKKncWaC79purvEgz9u6fdzdTtXxU7Q9GkpiuG0RjpHbKFHlMjh3BjrQg\nzEeocgJZN8hwWNxGJKspaIrD9+bPCsHU2IIEGq6sasfxNkmhE9ZISMrqoRMe\nXo6pbkeGRPnjPCIepleWbOjfxPNcaov0qSxmGer5qmnJ/JBV41PDXpBixliB\nb2cHFowBGYa7vQXKI19fHqBphk49EQzmtd+qZT6GvDB6eFrX6u0dAGyrSPJM\nB2JJ\r\n=9rdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJPmnMdbQfNlFN2gIB1jrSDeDIMSYeSJ3vidyV4aNtnAiEA3sJvTDPraetC8QvnDLjfHj2pFnqP5fh+SOLR514IvVY="}]},"_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-ripple_0.26.0-canary.b9d35b69.0_1641407196218_0.1904480585035071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.2afff08e.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/ripple":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-6O9VeMIF+5C6uahOydRr2xmFGB11DvoSsbhu3EDKvsuJLKoe61qfRyhhUoEC47++JT73Gig3MN0mSdXQIq4S2g==","shasum":"230f7a08bb60673b0c6c9520ea8fdd35ac3d8f22","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.2afff08e.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12uqCRA9TVsSAnZWagAAE8MP/jrbO56eaVT4+58OJUJB\nUfZeedzxRiSJg94UF/XQN3+FrRfpK/yzM7vLGm4WHQU/yEcMeoANF207OpaH\nm68+baH8LOQ4+erVxPbZXcuB1NTv6hKrQCuJK0WdDqyqex0u9xxPeZSL9z1C\ndCsdpWdy35uyfMbVYwDoLKqYobQ76u5HoQiM/hwhpdGgd1F83mxbyJo7X9Gc\ngzw+9vIGdko3OQBEDgwE8nLxtzjlxBDtRjebsgGI1KhaHcmeTr0dbEYrVIQf\njkig/kbjoD235V6iV1j6BMNmk4bkDwgMcZ1Bx704bl+3WSMVzVxOXIppjD2M\nMEfvrUFXS8Z5q9w31KSlrY27ED9mAZnVRrLG88wMEEdYF4kFtXCCha+LrMB9\nJ5kycduHt4+nQn/+vQYEghwFrZwG9sUhyRUHn8lEiCV8KE/gtb4AJHkk7m9L\nJ4wWthW6kT+waNYzVsa4Riz1vZ/MmZgbdkuLp/ssmAYZZREk48uDySdP0aIy\nqo5gPq029HZrJ0uyy7+VW0QDE3DAg231L7gZjRO/Hg4v7sL3nFYguWKSQVhR\nEDxAe0RwiiJjyfaY2HCmwnGGG1dT2Yow/XcUIZQgm5QL3lIuDkHbSJ5oY8v1\nB4wmNA+rrc61uxzoY/mIrzPNhJm5VqHBZAY/WL7vpVxj35FMrJfTKB+aUJ0u\nNHie\r\n=4A1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5Pioh/gpHu+h7FQBj1h3WynC34i4TZJE/pV5D7XYqBgIhALlb5l0njKWD8WDkoYjcnwB+81hJbxGj53MIXmxaispb"}]},"_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-ripple_0.26.0-canary.2afff08e.0_1641507754031_0.6297037564447774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.893fc857.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/ripple":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-uyH65Hz9UwqGt8SMy+qai2gr5FwNQzWUSBrM6lS6AwMCqIoFLwplH+XBgF7pOldwCXPFfoQT8XSUwxoye0pHcA==","shasum":"456f59758d158fe99c96cf6bbe8a9514bfad20c2","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.893fc857.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwnCRA9TVsSAnZWagAARkUP/3rATweEKDxbRpLLTgYI\nLSkne+K7Kx4X14un8rLa1pPecQXLNVAMMvYORsfTWOy2/SesePCDg2fRTvUS\nQ88B9xvMorulqRMAi7XJeYqNwcEGnlvP+orlIlC2joddMIvMpi/0XBBn0VI9\nVzKaS1Z5Genj59cW+MueLx7RGCyFtjkuSHhjv09gZQDvf/mS5hDhdSGCjJk9\nn4ZR2xXZtVwothYAq19V24N9OHBnqWwcDTEqwH0KoRuAbsbXx9lVxtnd8WYu\ndIIAi5OfMcZfYXJrjUaC8ADRe+H9410519l2MezwItw+9E3Oo3QIYYEIKYVn\nHVy1YmkTWiiER+Nasq4FZnYXSQB8cAXefZXI+QdqZGs1pLPDe69TBxTV6/os\nxcvWi+NsY0HbYf5IXNCjYelLMJXn9bWa3F8K3jCX0XD5cmWMzyubMEZ8ATAg\npjb9PaGdrxZhUL1BkkIrVFMnx0iZ9l4+PcOVxTiml0wT9Glk16GzATFuP1eF\nQVmEJjmq8rkwohpGcAKhrol56vJp/CqsMkwLvTfMWoBgunHnjHnItswPkePc\nlD8eADZnywj/P7vGuWMHlXKD49SJWnDLoFSeFv2VJuY5ZhfPe6WgqGeoKjak\nWuKJUoCRd9zMgCG1IChhX84SHWDlDdDofdI4FXjjJPgzPKp2OAfC1vs+HtDi\nkx6b\r\n=ebTB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmsXDKZg3om9VP5263hXM5JiWmq+qVlVq+zCnoC+koBAiBpTR0rB+hlY32uNxLQyVLUdapA7pu1rBzkNQdVI438tA=="}]},"_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-ripple_0.26.0-canary.893fc857.0_1641581606923_0.20947564765224325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.69ba13b7.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-bZ7unIp7bFMVs2UwnZUxBI2Q+QKE4EqBtBjctOk6ose1VMYDbkylup8AOhigWjumgRBMF40Bo3om6BD26Si3uQ==","shasum":"475a09de8d50f324f1bf0892f0204678a1673e0b","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.69ba13b7.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9iCRA9TVsSAnZWagAA1agP/jUjfHuHgaC4divkGfZ7\n05Y56+8mDxerJzbsB9N4bgtoshLO/nUkgKVDTPEfLSwmgzHYjSNiMHRuJ7op\nFfwCygpn7KHrlczXlRQQNj1xBnqa1YDRU4Dph4PJj9wtCVtrqzTk10kopEP7\neXEbwPsMev6CPJw7E4MhUfk6lwWi6hDBcqtiWdrwJbLifDBNWI8VAdrWLGNX\nDzwW7+Xgu//0kVt+Yrkgxhmbmgs438iNeLRcAuoxzWgVBR0v2v+3h5kzpYma\ngtL0XCFPSsb8MsLtcj8c4+YAtGYhxFTpVLT1H2Cr8uHtcKlqbQiG9Ot4rurl\nwigvNRydbnF87PEh3iHXsw2Ck76CvkKYMz62wYJZzqFcr4R3ZUafAfe3Hs3I\ng2FQjcLzFwvDXSM0Y0FYVFvYRwdxLJTSP42ISrvFI8JznxUMYpC/2AUIg04j\nD9fZsbAEdVnmgGcx9eCW9XFQyflIaxbilEs7NUiCgUaVlG+8q0zHgF6IkpFY\nevypqsgaY0qMZqfyT52aY1nvNBXLDQh/iyDVkr+s/U6qn6+F+lxiJMi1x0md\nYSUW5Op1cPfkMr6n7JeRgYl51OSE05GlnnTMD8DF0wPR9uH+LSR3pA++zT0l\nxQedUd0z7BUdnsQM8IQs4Fv8gtlZUoCkDC9JU9kFrJlmtpGvtSAj+WgEn3fH\nPV/M\r\n=tY/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICW1XWUy76xFY6YwXtmk6ZbTltoWHJun96hKNq/hXKNaAiEAxnF0Gb7F2KIXrUmCjjp/gs+Gr+V2UC9G33oJcRBnoYI="}]},"_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-ripple_0.26.0-canary.69ba13b7.0_1642631010228_0.36312461597631085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-ripple","version":"0.26.0-canary.0af8ade5.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-ripple@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-fJCExRuhSvr4B7J5A7Gxr3jFPi1WXgQzHQmN3xh89yA2s5ne/8XZxF/1F/c73PUrreDUR4rsZvMbIr3C+vafgA==","shasum":"8e0de9c1a1874183355e0a6f8aff76d741775443","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0-canary.0af8ade5.0.tgz","fileCount":19,"unpackedSize":76064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZd+CRA9TVsSAnZWagAA0tsQAKMSRlbZuGu3jrNLxM/h\nSOhQJJk4MI4YM6qwxU3p27Hn3E8IeU8BoGanMQRObprjwH6oQFcnL+De/2a9\nWL8Zh7xjS3m/eGyyl32a4556xc8ZVIOI1UY7ClJNY2mNdtxtq/I1QvCUC0uh\nBYxTS/ZYXxCuRVcWKmY95qxxsLKAoH+RY5W/GqRsi3wOevJaO04YKYsjvda6\nrlwwkJzjQ7joopq8PTw6OsAVIYjad+XogiIPQ5rBGTQC0JLsvKrAk1T3HBJL\n3irlmteOqgZfvGc+fNRuqq3ktcY1xgFUsKzpG+x2bs8pGy61lLAcrgCDTn/l\nQZlLlx8grJbr0dXKNrXnZ5ELlEOYxHFUZvyO7OmIkfeYS/mA34pSXAtcgGIC\nolqrYHRUBqbAYfevWfbl1NyvrlH+pFLKlGD+mcd02ljYDWV1qomqM8/MWhAn\n8EtO5pXZHZ6PViIeqE2vbNcgOcNePKgV+8YvxM41HbG0eKCZLxV9jb/ZAA0P\n5tfCKiX79GCZWKEKgIsxEMke4YFR43wXfMuf4TNrw1Dw8s0H28eJVLAujqoq\n6aYbdzJFX5uDhAZoX7YBXjmKuXb0Zt1upxePOAzlzvwHKYnzzZwc8ouWzhAv\nLi9vfcWfRW8IqUakOXoM5ChQVwt664hx9/zVsJ0n3DtY9J+BfUFEYmyXhd43\npZs5\r\n=cgV4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+FtfuOLHtpKAgub+idekN1/YH7AW3aFqFe4VbBx7tjAIhAOEl3KN3YU8DoF23cGccEwIKoMtwwE2TO6l+YlLIfa0Z"}]},"_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-ripple_0.26.0-canary.0af8ade5.0_1644271486583_0.9948220166999884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-ripple","version":"0.26.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0","@material/mwc-base":"^0.26.0","@material/ripple":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-unDFbwhZiqojOLF20/5MnYghBk1V1H1r7mJbXG7Jam8x/V1nbdljPIXj0EP3YInt5dBPQHKcf+JkW1En1LGNFw==","shasum":"7c6382d472550ed9c34cbf8730468c4d2346a8f7","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.0.tgz","fileCount":19,"unpackedSize":75948,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEsjAj7M+swcGYkbAKxT1V/LxIkEvv4rVrzWngYL259QIhAPd5O+sSmzXI/vOCZGmTGNZT1nUTjTZ+BuqhMiIzsDg6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgIw//USlY6MaW9HMX6xmrU3bi2OAVMB/c1ux5sZk3eZi+fV0iVjrC\r\nWifseGl83B/7Wd146pgoGebQAiJ47UEqSXwlCa5lumd3B4I7zQ/qFJNqE4/P\r\nWgGRdlM0O/hkuiFKSYLP/Nqyan/bLxOIk2Ree1j+SBYP5SNxAQIHd3rDCMWB\r\nCp1iQ2zfNjcNKD8K1FjXl3fdftBVJ1UjF6RKzGUdoDhIVwTtxW9IzKMxNdVe\r\niG/ayDXR/q+ml9VD+cCFNaMxltVRK+BfNO5nEDt/Tco6h/R0tHE7P1CfDouA\r\nu5IS9o5itx475bsrsEggD5YmnpkkSrqm0OL+WvS9S6HGTHk0Udj++AfYhgIS\r\nxReOJSlg6ZP0Vnx9SELOGxR2kcLouz2Sfzd79cnb9nuhxL9RhOqlh+4gYAl8\r\n4Fl+ReZ/Jmz4oVMxpdjnpd+VgtpBWvabHiMCr5NhHnfmF9H3Q/ZKwBE26Nro\r\ncHlQGos34Ovq6CGag+TqV1ZL2wCygfo6/plkaqlMZA85ajn9yIdunFKNP0RU\r\nueq8ZKvOziIhEsUz8BFb7jQTST1xws9uVWdl5BMnpCNIDh0QCdZakR3IiVPk\r\nk0Hu84Mo71O7c2GNSIpdy3p6yUCZ7vCXyKsZv+JmxRNbC/ob29CgBJ2QuKCx\r\nGHuYWb56pVDfzbuUCafAP7bwN7NoZwb+P68=\r\n=SRxZ\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-ripple_0.26.0_1651599028691_0.6054540950724399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-ripple","version":"0.26.1","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/ripple":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-hBeC2S7TSYLmHetXbtu52/EZFzvAqrQk5skIV0aUZeZvywTJWRVoc5OavDjsJYuKxDnSECMnkIt8+l8WC48chg==","shasum":"0825137329c78df02cee4f8da2e28d6daeceb305","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.26.1.tgz","fileCount":19,"unpackedSize":76086,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrEc4QL9Yv/cu4Yu9INPL5Jy18x3aNhpAMSa40tbWNWAIgBdAgQapixsuSjb3zp0tOfaAWe5Wb5Vm2vsTqg+OoEAQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXoyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5xAAh0ELDz6Mnwnj/RV+YCLAyKvVXUEjp/vFHlkv7kLWgAaNaHy2\r\n+63+9xeFH0V/gYA2CkR4CReUAGfuGWUbGQK60TCMy5+AhTjhxM2XwS31h/0b\r\n03pe8dT6T7+3eBP6e9qeqpBJPdIRSJ1qp4nO8gpDJdPxWuYFohAPlaLHlanq\r\nNx+Tj3J1nbLdNHp6gugOBUY17ypVQ25KTjBOIzulUVGVmG2kLr+Z393QzmIW\r\n2buLukGxZTvN7qqjFJcHistrHtADU0uluDErYlrBrEm0z5cweGP+ekEiY7w1\r\nYFzKKpLUeU/E1Ah2FrBFnvyS+I6RyyAknrOS7JKnwG4/fvfEMmmd4Ok5jget\r\nQfZpwG03Ud9GEpdiwl7wNZtmigaoy79JLUn66RYvH5/43hcT/tBwVltNp7HV\r\nCWH0Ae8n2nCJdiaVPNwILbEcvFHv1q9ZjrVmwciVHKyD6xeB6lFOb69cBtVM\r\nM4XA8XEwpA2Xrkcf33HBmZ0WnOPw9AAdLTxRmOQgVQ4uAIk4JN5d4vBgqgpi\r\nwZdzpF46EbinitLDWxeRlZwmNyT8/UZgkmhU4Vq7og3dnXEekSbzRL7uR2iQ\r\nCvJgtoW8XmGrQQCkrZnYPi4FgdSEWtm9HOxlmx1t5qwYRzBxm0ZG8cOs62/h\r\nesMxd3NiT2/nUw7mB4X+Pl/Q1jpcnwQBlZE=\r\n=PtFc\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-ripple_0.26.1_1652128305972_0.9208388882506298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-ripple","version":"0.27.0","description":"Material Design ripple web component","keywords":["material design","web components","ripple"],"main":"mwc-ripple.js","module":"mwc-ripple.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/ripple"},"license":"Apache-2.0","dependencies":{"@material/dom":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/theme":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-ripple.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-ripple@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-by0O8d8g3Rd96/sUB8hxy6MrDx1QTstqOsA64vqypWd526hMTBGRik08jTNap5sVIyrN9Vq17jb4NJLWQLnNHQ==","shasum":"1dff975d41151ed78285013a289a5dbaca769636","tarball":"https://registry.npmjs.org/@material/mwc-ripple/-/mwc-ripple-0.27.0.tgz","fileCount":19,"unpackedSize":76086,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBCWUWQw2L2UkUXhBKzEMmEuIm846CCUhfDSJln/i5cAiEAm/xu6MzOezmZnPdG+JgxyANAesNOLP5mLbCFg1mh4JY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV0A//WuofCTcRP2g/m0orvScHWZg9Iw+znDZWEbzzqpKVf5JHkON1\r\niNdK41eBQ4tmT7R2fX6WcFG8HhrFNKPP55MjSMikHZ48+Vmp+/P6dlCGnCy7\r\naNNFf7roSX89idL4Z7RiT0XijbRXjRnkCUNsu3SHFzpeMXWzZCFNp+VzTS5a\r\nm5Lk6KmsvGmlFR1o5GWRnVobjN/cRaqDc5XztKwX1X6yeH/R9gJ1U8q1RY0e\r\nWAJjEz/fPMC8AaOxec2G9VHAyG43F11lq5BdT9K9+DlJCLiYvEgCVv7pNqHI\r\nkY4SoGVQrfbO79huG4FNbNyFF8hdDXxuS9xz93aPt9DNP9Zdk5RlKFXRRt1G\r\nziU4UmCe+wVZ+1dKwn01yXtwcZMwgvRvuimTXP9DbZp7nnmAnkNCHeCPG9T1\r\nFwnojAGyoRgF86xSvBYTyUP1EuxkN58vt41WpKkaaM4iLDGNt7dE/USUEdBI\r\n1oh5BhUqVj2ZK1JUS+9YIBgg6m7ooksJwdduyQw5TKQIYXsLjve33I3g+g7Q\r\n2X6LDQvjL12rwrMzBaFzFaDFEDCJ/j6Zp8AfxgER3YMHaabTS3qLpjald9jf\r\n3bH6PeWGukb6toMCDRjodKicJi6jFlzod1XwuiUIZCzvwFnAcIzniOPX3h5W\r\np1e4Xx6AxWw5mLsM9dnLmktedR0MDNut8hk=\r\n=Ux/7\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-ripple_0.27.0_1660331520251_0.626211004959591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:29.198Z","0.1.0":"2018-05-08T00:04:29.362Z","modified":"2024-04-04T18:55:03.002Z","0.1.1":"2018-05-09T21:05:00.544Z","0.1.2":"2018-06-14T22:51:09.354Z","0.2.0":"2018-09-14T00:36:40.528Z","0.2.1":"2018-09-22T01:00:25.947Z","0.3.0":"2018-10-04T23:25:51.809Z","0.3.1":"2018-10-08T19:20:36.140Z","0.3.2":"2018-11-17T02:05:55.986Z","0.3.3":"2018-12-04T00:57:59.789Z","0.3.4":"2018-12-13T20:39:13.449Z","0.3.5":"2019-01-11T22:16:40.447Z","0.3.6":"2019-02-05T20:18:33.490Z","0.4.0":"2019-03-12T00:01:20.845Z","0.5.0":"2019-03-26T22:38:45.112Z","0.6.0":"2019-06-05T22:20:13.344Z","0.7.0":"2019-08-27T21:23:37.897Z","0.7.1":"2019-08-28T02:54:16.865Z","0.8.0":"2019-09-04T00:04:30.506Z","0.9.0":"2019-09-27T01:36:08.575Z","0.9.1":"2019-09-30T21:04:53.425Z","0.10.0":"2019-10-11T23:28:11.525Z","0.11.0":"2019-11-26T21:49:26.378Z","0.11.1":"2019-11-27T00:26:30.108Z","0.12.0":"2019-12-17T23:47:47.372Z","0.13.0":"2020-02-04T04:46:28.455Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:06.297Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:40.860Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:10.077Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:35.518Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:53.587Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:29.459Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:46.069Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:39.955Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:34.766Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:18:59.457Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:23.713Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:15.552Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:00.188Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:00.998Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:03.775Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:23.774Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:37.617Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:07.300Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:47.116Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:18.791Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:36.564Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:45.569Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:40.971Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:16:56.862Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:10.941Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:33.992Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:41.346Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:29.371Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:09.292Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:06.975Z","0.14.0":"2020-03-19T21:28:31.817Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:43.508Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:12:53.127Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:37.972Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:17.008Z","0.14.1":"2020-03-23T17:57:25.008Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:37.639Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:24.348Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:54.951Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:42.343Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:50.803Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:12.066Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:08.301Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:13.202Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:19:59.000Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:26.818Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:28.345Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:26.726Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:46.419Z","0.15.0-canary.6b946095.0":"2020-04-03T21:23:56.810Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:25.257Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:38.171Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:37.026Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:12.057Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:15.954Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:29.289Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:14.416Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:53.789Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:38.601Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:17.647Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:26.691Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:00.273Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:49.726Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:46.987Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:11.620Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:01.264Z","0.15.0-canary.dae38247.0":"2020-04-18T00:15:59.050Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:06.722Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:00.435Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:50.638Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:14.061Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:02.837Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:37.376Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:11:59.144Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:24.304Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:40.841Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:27.992Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:40.215Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:42.989Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:47.179Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:45.575Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:43:59.208Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:13:56.211Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:24.830Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:29.305Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:31.044Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:28.187Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:46.289Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:00.713Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:11.929Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:26:54.828Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:29.136Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:46.985Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:34.409Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:13.388Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:44.172Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:23.554Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:17.360Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:38.182Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:44.121Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:51.055Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:29.526Z","0.15.0":"2020-05-05T22:36:03.711Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:13.180Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:25.925Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:00.282Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:18.609Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:19.580Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:45.444Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:24.365Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:50.482Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:35.071Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:03.036Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:37.505Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:33:58.273Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:04.332Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:22.481Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:51:56.852Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:08.419Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:25.045Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:34.599Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:18.186Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:19.776Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:18.397Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:36.273Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:03.458Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:08.890Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:03.008Z","0.16.0-canary.421a6856.0":"2020-05-20T05:23:58.629Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:32.319Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:08.360Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:03.682Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:06:57.419Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:31.312Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:20.551Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:50.244Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:02.929Z","0.16.0-canary.43bde144.0":"2020-05-27T18:28:59.410Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:53.940Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:13.556Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:41.732Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:21.328Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:48:57.057Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:21.604Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:33.483Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:16.940Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:31.557Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:49.437Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:22.010Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:32.089Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:45.500Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:08.375Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:21.388Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:45.736Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:25.218Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:48.931Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:57:48.097Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:26.142Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:22.937Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:26.500Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:36.429Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:18.153Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:29.706Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:27.521Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:27.150Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:39.681Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:51.465Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:05.615Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:38.177Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:56.370Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:05.279Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:28:51.764Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:37:58.730Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:05.050Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:32.648Z","0.16.1":"2020-06-30T21:14:43.282Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:54.608Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:42.865Z","0.17.0":"2020-07-01T19:44:00.066Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:09.865Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:15.026Z","0.17.2":"2020-07-02T05:58:10.133Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:05.904Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:14.045Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:54.790Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:06.268Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:19.972Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:30.020Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:14.962Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:02.017Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:05.268Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:40.169Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:32.463Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:16.087Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:35.168Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:06.465Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:34.114Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:17.789Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:47.714Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:11.878Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:37.315Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:42:09.734Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:11.755Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:40.691Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:36.043Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:24.146Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:25.230Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:42.421Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:03.917Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:06.994Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:33.568Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:51.476Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:04.912Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:16.787Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:33.959Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:50.791Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:10.066Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:11.827Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:20.980Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:04.268Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:36.414Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:42:57.358Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:52.616Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:18.843Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:33.477Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:13.390Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:46.005Z","0.18.0-canary.779853ff.0":"2020-08-03T17:22:55.198Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:26.626Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:48.802Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:23.310Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:15.012Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:18.971Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:01.817Z","0.18.0":"2020-08-03T21:24:13.950Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:30.841Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:44.610Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:26.356Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:38.090Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:01.787Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:04.327Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:29.393Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:03.623Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:22.984Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:34.793Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:09.926Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:06.637Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:37.243Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:24.530Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:24:50.482Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:05.713Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:13.117Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:16:59.505Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:14.753Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:45.292Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:09.735Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:01.698Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:42.359Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:17.425Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:15:47.044Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:26.738Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:34.118Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:43.401Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:41.988Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:07.212Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:47.154Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:14.913Z","0.19.0-canary.f208201e.0":"2020-08-24T19:02:54.048Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:26.191Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:45.260Z","0.19.0-canary.34012082.0":"2020-08-27T19:47:51.805Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:11:55.276Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:48.686Z","0.19.0-canary.697e3879.0":"2020-09-02T00:12:48.115Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:17:56.517Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:14.444Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:45.633Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:10:50.489Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:11.421Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:14.807Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:31.973Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:12.810Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:39.256Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:35:54.699Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:25:58.223Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:26:53.165Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:12.744Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:33:52.327Z","0.19.0-canary.3babab12.0":"2020-09-11T02:36:43.601Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:48:58.700Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:07.324Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:12:56.117Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:08.781Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:28.634Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:48:56.483Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:28.600Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:12.572Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:16.070Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:06.836Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:22.008Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:03:48.896Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:20:58.529Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:06:56.682Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:04.382Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:51.406Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:51.795Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:49.391Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:30.257Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:06.045Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:34.845Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:47.014Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:05.505Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:23.330Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:13.690Z","0.19.0":"2020-10-07T22:33:13.505Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:24.733Z","0.19.1":"2020-10-08T23:05:43.477Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:40.394Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:01.935Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:51.185Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:00.264Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:32.082Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:07.303Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:08.707Z","0.20.0-canary.4773c773.0":"2020-10-16T22:33:54.236Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:37.699Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:55.081Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:33.268Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:43.273Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:42.617Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:38.894Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:10.569Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:16.537Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:12.163Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:31.596Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:25.791Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:31.218Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:29.237Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:46.365Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:44.582Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:24.590Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:09.187Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:36.624Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:19.679Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:25.939Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:48.811Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:22.677Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:37.576Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:34.237Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:16.388Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:50.488Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:17.397Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:49.221Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:00.437Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:04:53.860Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:47.947Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:26.875Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:07.538Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:48.727Z","0.20.0-canary.9755be10.0":"2020-12-03T19:24:57.931Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:21.687Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:31.286Z","0.20.0":"2020-12-03T22:28:39.134Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:29.127Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:30.970Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:39.350Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:23.431Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:25.137Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:46.278Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:21.024Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:18.533Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:11.417Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:53:55.241Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:41.819Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:41.297Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:08.653Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:37.294Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:51.458Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:27.202Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:08.848Z","0.21.0-canary.bc113605.0":"2021-01-14T00:44:55.622Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:52.032Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:07.526Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:10.472Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:20:58.602Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:53.118Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:27.247Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:05.365Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:14.713Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:17.885Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:12.232Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:09.965Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:06.620Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:04.409Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:24.710Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:32.693Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:55.396Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:06.596Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:37.217Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:52.125Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:04.874Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:45.645Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:16.912Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:15.611Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:04.995Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:16.753Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:43.715Z","0.21.0-canary.5160e548.0":"2021-02-05T23:50:55.127Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:14.043Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:38.719Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:44:09.451Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:34.236Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:40.352Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:47:59.822Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:29.184Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:40.710Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:20.608Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:05.900Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:34.343Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:30.596Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:01:56.613Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:53.787Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:29.541Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:49.322Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:47.955Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:03.731Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:33:56.193Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:46:29.647Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:36.728Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:05.001Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:49.702Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:46.212Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:12.150Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:13.134Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:11.602Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:48.502Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:50:53.845Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:33.070Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:22.205Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:36:56.011Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:22:56.035Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:21.210Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:28:57.475Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:25.859Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:27.421Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:39.695Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:31:56.618Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:02.766Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:27.554Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:13.233Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:39.987Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:15.445Z","0.21.0-canary.572107b5.0":"2021-03-18T23:53:58.153Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:41.729Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:33.654Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:20:56.115Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:32.448Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:11.676Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:02.585Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:18.103Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:47:54.877Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:02.547Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:46.534Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:52.123Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:05.600Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:42.690Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:45.476Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:35:57.998Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:21.456Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:27.913Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:44.953Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:00.934Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:16.067Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:07.665Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:53.503Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:29.736Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:25:58.544Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:31.695Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:01.780Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:45.818Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:40.902Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:16.750Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:49.760Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:05.825Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:18:59.886Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:08.057Z","0.21.0":"2021-04-30T23:58:02.755Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:04:57.888Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:49.823Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:17.221Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:17.818Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:35.379Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:00.229Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:47.145Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:35.812Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:30.911Z","0.22.0-canary.e300688e.0":"2021-05-07T22:23:58.340Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:51.121Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:07.645Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:15.448Z","0.22.0-canary.004aca62.0":"2021-05-11T18:05:57.525Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:42.227Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:17.379Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:09.012Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:02.345Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:03.083Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:53.146Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:01.028Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:30.676Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:07.910Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:42.009Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:18.370Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:03.791Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:37.772Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:52.044Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:35.876Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:37.046Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:07.298Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:22.212Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:51.162Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:01.968Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:04.086Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:05.876Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:43.748Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:40.416Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:00.199Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:48.241Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:49.834Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:49.378Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:47.188Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:41.524Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:09.809Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:49.982Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:17.145Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:46.019Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:00.701Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:30.570Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:22.289Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:14.689Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:46.035Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:46.730Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:38.945Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:16:55.987Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:20.117Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:42.020Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:02.479Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:45:55.752Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:52.197Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:11.110Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:25.498Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:26.143Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:12.996Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:33.941Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:45.353Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:19.201Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:15.557Z","0.22.0":"2021-07-14T22:31:53.941Z","0.22.1":"2021-07-14T22:52:45.453Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:43.511Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:14.988Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:21.809Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:19.405Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:43.334Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:24.291Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:42.522Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:56:55.996Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:30.909Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:48.832Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:16.832Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:45.931Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:11.206Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:19.009Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:17.038Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:21.233Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:17.466Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:37.131Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:38.029Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:45.158Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:54.025Z","0.23.0-canary.d595e030.0":"2021-07-23T20:52:56.314Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:31.918Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:33.759Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:49.138Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:52:50.786Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:03.644Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:08.420Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:49.787Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:28.370Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:29.547Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:31.865Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:11.333Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:22.960Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:37.503Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:12.944Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:35.052Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:12.202Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:36.959Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:43.638Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:25.679Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:48.511Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:23:58.567Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:44.158Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:07.996Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:04.925Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:08.376Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:01:59.939Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:02.115Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:03.083Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:14.974Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:25:57.142Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:26.072Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:36.809Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:49:59.652Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:35.642Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:23.554Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:46.279Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:25:58.678Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:39.389Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:29.594Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:39.455Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:29.424Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:19.827Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:42.442Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:16.382Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:30.227Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:15:55.737Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:10.216Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:19.190Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:32.907Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:07.482Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:42.230Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:26.084Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:03.873Z","0.23.0":"2021-09-13T21:35:40.819Z","0.24.0-canary.9830d665.0":"2021-09-13T21:36:53.011Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:31:55.966Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:02.684Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:31:59.696Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:37.254Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:12:57.025Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:32.574Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:21.246Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:31:57.711Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:25.888Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:22.573Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:38:57.769Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:35.338Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:51:59.801Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:44.522Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:32.747Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:28.856Z","0.25.0":"2021-09-21T02:52:59.990Z","0.26.0-canary.6be1a13e.0":"2021-09-21T02:53:04.261Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:01.159Z","0.25.1":"2021-09-21T03:12:38.746Z","0.26.0-canary.ae060177.0":"2021-09-21T14:37:56.911Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:06.817Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:35.548Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:26.123Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:30:57.552Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:12.049Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:21.732Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:40.880Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:38.438Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:42.966Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:06.326Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:23.744Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:05.480Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:11.674Z","0.25.2":"2021-10-11T23:18:29.212Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:17.924Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:41.440Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:27.413Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:19.887Z","0.25.3":"2021-10-21T17:55:39.263Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:13.438Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:44.496Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:35.439Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:15.307Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:41.151Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:22.477Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:49.036Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:52.292Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:45.155Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:17.093Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:09:50.853Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:46.095Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:24.302Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:40.223Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:21.618Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:36.623Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:34.209Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:27.099Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:30.349Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:46.722Z","0.26.0":"2022-05-03T17:30:28.823Z","0.26.1":"2022-05-09T20:31:46.130Z","0.27.0":"2022-08-12T19:12:00.404Z"},"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 ripple 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/ripple"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-ripple>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-ripple)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRipple provides the JavaScript and CSS required to provide components (or any element at all) with a material \"ink ripple\" interaction effect.\n\n[Material Design Guidelines: States](https://material.io/design/interaction/states.html)\n\n[Demo](https://material-components.github.io/material-web/demos/ripple/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-ripple\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/standard.gif)\n\n```html\n<mwc-ripple></mwc-ripple>\n```\n\n### Unbounded\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/unbound.gif)\n\n```html\n<mwc-ripple unbounded></mwc-ripple>\n```\n\n<!--\nTODO(dfreedm): add examples when list-item has activated and selected states\n### Selected\n\n```html\n<mwc-ripple selected></mwc-ripple>\n```\n\n### Activated\n\n```html\n<mwc-ripple activated></mwc-ripple>\n```\n-->\n\n## API\n\n### Properties/Attributes\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\n`primary` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-primary`. Will be overridden by `--mdc-ripple-color` if set.\n`accent` | `boolean` | `false` | When true, sets the ripple color to `--mdc-theme-secondary`. Will be overridden by `--mdc-ripple-color` if set.\n`unbounded` | `boolean` | `false` | When true, the ripple will flow outside the component in a circle.\n`activated` | `boolean` | `false` | Set true when the container of the ripple should be in an [`activated`](https://material.io/design/interaction/states.html#activated) state.\n`selected` | `boolean` | `false` | Set true when the container of the ripple should be in a [`selected`](https://material.io/design/interaction/states.html#selected) state.\n`disabled` | `boolean` | `false` | Set true to disable the ripple when the container of the ripple is disabled.\n\n### Methods\n\n| Name | Description\n| ---- | -----------\n| `startPress(event?: Event) => void` | Begin the `press` state of the ripple. Optional `Event` will be used to determine the beginning coordinates of the ripple animation when `unbounded` is false.\n| `endPress() => void` | End the `press` state of the ripple.\n| `startFocus() => void` | Begin the `focus` state of the ripple.\n| `endFocus() => void` | End the `focus` state of the ripple.\n| `startHover() => void` | Begin the `hover` state of the ripple.\n| `endHover() => void` | End the `hover` state of the ripple.\n\n\n### CSS Custom Properties\n\nName                             | Default                                 | Description\n-------------------------------- | --------------------------------------- | -----------\n`--mdc-ripple-color`             | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/ripple/images/color_000.png) `#000` | Color of the ripple will have when activated.\n`--mdc-ripple-press-opacity`     | `0.12`                                  | Opacity of the ripple when pressed.\n`--mdc-ripple-hover-opacity`     | `0.04`                                  | Opacity of the ripple when hovered.\n`--mdc-ripple-focus-opacity`     | `0.12`                                  | Opacity of the ripple when focused.\n`--mdc-ripple-selected-opacity`  | `0.08`                                  | Opacity of the ripple when the host component is \"selected\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-activated-opacity` | `0.12`                                  | Opacity of the ripple when the host component is \"activated\". This opacity is added to `press`, `hover`, and `focus` states.\n`--mdc-ripple-z-index`           | `0`                                     | Z-index of the ripple.\n","readmeFilename":"README.md","keywords":["material design","web components","ripple"]}